Let’s talk about how to transfer data between parent and child components in Angular

How to transfer data between parent and child components in Angular? The following article will introduce to you how the parent component in Angular transmits data to the child component, and the child component transmits data to the parent component. I hope it will be helpful to you!

Environment:

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

Transfer data between components, the most important thing It 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 child component. At the same time, when the child component data changes, it is hoped that the parent component can be notified.

In 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. [Related tutorial recommendations: "angular tutorial"]

father-to-child@Input()

1. Child Component definition @Input()

The @Input() decorator in a child component indicates that the property can get the value from its parent component.

For example:

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

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

• In the html code of the sub-component, you can use the message variable, for example:

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

2. Passed by the parent component Variables to child components

When the parent component calls the child component, the variables of the parent component (such as messageToChild) can be passed to the child component

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

In the child component, you can change the message passed in variable, but its scope is only in the child component, and the parent component cannot get the changed result. (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

Programming Learning ! !

The above is the detailed content of Let’s talk about how to transfer data between parent and child components in Angular. For more information, please follow other related articles on the PHP Chinese website!