Angular v16: Data Exchange Between Parent & Child Components

Explore the power of Angular v16 in enabling smooth data exchange between parent and child components. Learn how to effortlessly pass data from the parent component to the child component using Input Decorator and vice versa using EventEmitter and Output Decorator.

Introduction

Efficient communication between parent and child components is vital in Angular development, laying the foundation for dynamic and interactive applications. In this comprehensive guide, we will delve into two indispensable methods for data exchange: sending data from a parent component to a child component and reciprocally sending data from a child component to a parent component. Follow along as we explore each method in detail, providing clear explanations and illustrative code examples along the way.

Sending Data from Parent to Child Component:

Step 1. Define Data in Parent Component In the parent component (Parent.component.ts), define the data to be sent to the child component.

export class ParentComponent 
{
  data: string = 'This is data from the parent component';
}

Explanation. Here, we define a variable data in the parent component to hold the information that will be sent to the child component.

Step 2. Pass Data to Child Component In the parent component template (Parent.component.html), use property binding to pass the data to the child component.

<app-child [childData]="data"></app-child>

Explanation. We use property binding to bind the data variable from the parent component to the childData input property of the child component.

Step 3. Receive Data in Child Component In the child component (Child.component.ts), use the @Input decorator to receive the data from the parent component.

export class ChildComponent 
{
  @Input() childData: string | undefined | any;
}

Explanation. Here, we use the @Input decorator to define an input property childData, which will receive the data passed from the parent component.

Step 4. Display Data in Child Component In the child component template (header.component.html), display the received data.

<p>{{childData}}</p>

Explanation. We simply display the childData received from the parent component within the child component's template.

Sending Data from Child to Parent Component:

Step 1. Define Event in Child Component In the child component (Child.component.ts), define an event emitter to send data to the parent component.

export class ChildComponent 
{
  data: string = 'This is data from the child component';
  @Output() dataSent = new EventEmitter<string>();

  sendDataToParent(): void 
  {
    this.dataSent.emit(this.data);
  }
}

Explanation. Here, we define an event emitter, dataSent, which emits data of type string. We also create a method sendDataToParent() to emit the data when called.

Step 2. Receive Data in Parent Component In the parent component (Parent.component.ts), define a method to receive the data from the child component.

export class ParentComponent 
{
  receivedData: string | undefined;

  onDataReceived(data: string): void 
  {
    this.receivedData = data;
  }
}

Explanation. We define a method onDataReceived() in the parent component to handle the data received from the child component.

Step 3. Handle Data Event in Parent Component Template In the parent component template (Parent.component.html), bind to the data event emitted by the child component and handle it using the method defined in Step 2.

<app-child (dataSent)="onDataReceived($event)"></app-child>

Explanation. Here, we bind to the dataSent event emitted by the child component and call the onDataReceived() method in the parent component, passing the received data as an argument.

Conclusion

By meticulously following these step-by-step instructions, you can seamlessly achieve data exchange between parent and child components in Angular v16. Whether transmitting data from a parent component to a child component or vice versa, these techniques empower you to craft immersive and interactive user experiences within your Angular applications. Unlock the full potential of Angular v16 and elevate your development prowess with these essential data communication methods.

Reference

For further exploration and detailed documentation on Angular v16 and data communication techniques, refer to the official Angular documentation at https://angular.io/guide/inputs-outputs.