An article explaining in detail how to transfer data between Angular parent and child components

This article will take you through the method of transferring data between Angular parent and child components (Component). It will introduce the method of parent component transmitting data to child component and child component transmitting data to parent component in Angular. I hope it will be useful to everyone. help!

环境:
Angular CLI: 11.0.6
Angular: 11.0.7
Node: 12.18.3
npm : 6.14.6
IDE: Visual Studio Code

The most important thing is to transfer data between components. The most important thing is to transfer data between parent and child components. For example:

<parent-component>
  <child-component></child-component>
</parent-component>

The parent component passes in data To the sub-component, at the same time, when the data of the sub-component changes, it is hoped that the parent component can be notified.

Angular, @Input() and @Output() provide a way for child components to communicate with their parent components. @Input() allows parent components to update data in child components. In contrast, @Output() allows child components to send data to parent components.

Parent to child@Input()

1. Child component definition@Input()

The @Input() decorator in the child component indicates that the property can get the value from its parent component. [Related tutorial recommendations: angular tutorial, Programming teaching]

For example:

export class ChildComponent {
  @Input() message: string;
}

• Add @Input() decoration Except for the data that can be passed in from the parent component, the other logic is the same as that of ordinary variables;

• In the html code of the child component, the message variable can be used, for example:

<p>
  Parent says: {{message}}
</p>

2. Parent component passes variables to child component

When the parent component calls the child component, the parent component can Component variables (such as messageToChild) are passed to the sub-component

<child-component [message]="messageToChild"></child-component>

In the sub-component, the message passed in variable can be changed, but its scope Only in child components, the parent component cannot get the changed results. (How to pass it to the parent component, please read on)

Pass from child to parent @Output()

Angular uses events to notify the parent component of data changes. The parent component needs to subscribe to this event.

1. Subcomponent definition@Output

Subcomponent definition@Output

export class ChildComponent {

  // EventEmitter ，这意味着它是一个事件
  // new EventEmitter<string>() - 
  // 使用 Angular 来创建一个新的事件发射器，它发出的数据是 string 类型的。
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

Subcomponent when the data changes , just call this addNewItem method. For example, in html

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent&#39;s list</button>

2. The parent component subscribes to the event

1. In the ts code of the parent component, add a function that handles the above event. Method, such as

addItem(newItem: string) {
    // logic here
}

2, in the html of the parent component, subscribe to the event.

<child-component (newItemEvent)="addItem($event)"></child-component>

Event binding (newItemEvent)='addItem($event)' will connect the newItemEvent event in the child component to the addItem() method of the parent component.

Summary

• Using @Input() and @Output() can easily realize data transfer and sharing between parent and child components.

• You can use @Input() and @Output() at the same time

##For more programming-related knowledge, please visit:

Programming Video ! !

The above is the detailed content of An article explaining in detail how to transfer data between Angular parent and child components. For more information, please follow other related articles on the PHP Chinese website!