Parent-Child Communication & Child-Parent Communication in Angular

Angular is a powerful framework for building web applications, and one of its key features is the ability to easily create complex, reusable components. In many applications, you’ll find that these components need to communicate with each other, both from parent to child and from child to parent. This article explores how to achieve this bidirectional communication in Angular.

Parent-to-Child Communication

Parent-to-child communication in Angular is the process of sending data or instructions from a parent component to a child component. This is typically done using Input Properties and @Input() Decorator.

Input Properties and @Input()

In Angular, a child component can receive data from its parent component through input properties. To define an input property in a child component, you use the @Input() decorator. Here’s how it works:

1. Child Component Definition:

In the child component’s TypeScript file, define an input property using the @Input() decorator. For example:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>Child Component: {{ childMessage }}</p>
  `
})
export class ChildComponent {
  @Input() childMessage: string;
}

In this example, we define an input property called childMessage of type string in the child component.

Parent Component Usage:

In the parent component’s template, you can use the child component and bind the input property to a value in the parent component. For example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child [childMessage]="parentMessage"></app-child>
  `
})
export class ParentComponent {
  parentMessage = "Hello from Parent!";
}

Here, we bind the childMessage input property in the child component to the parentMessage property in the parent component. The child component will display the message passed from the parent.

When to Use Parent-to-Child Communication

Parent-to-child communication is commonly used when you want to:

• Pass data from a parent component to a child component.
• Configure a child component’s behavior based on the parent’s input.

Child-to-Parent Communication

Child-to-parent communication in Angular is the process of sending data or events from a child component to a parent component. This is achieved using Output Properties and @Output() Decorator in conjunction with the EventEmitter class.

Output Properties and @Output()

To enable child-to-parent communication, you define an output property in the child component using the @Output() decorator and the EventEmitter class.

1. Child Component Definition:

In the child component’s TypeScript file, define an output property using the @Output() decorator and EventEmitter. For example:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendToParent()">Send to Parent</button>
  `
})
export class ChildComponent {
  @Output() messageToParent = new EventEmitter<string>();

  sendToParent() {
    this.messageToParent.emit("Hello from Child!");
  }
}

Here, we define an output property named messageToParent and use the EventEmitter to emit events when a button is clicked.

2. Parent Component Usage:

In the parent component’s template, you can bind to the child component’s output property and listen for events. For example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child (messageToParent)="receiveFromChild($event)"></app-child>
    <p>{{ messageFromChild }}</p>
  `
})
export class ParentComponent {
  messageFromChild = "";

  receiveFromChild(message: string) {
    this.messageFromChild = message;
  }
}

In this example, we bind to the messageToParent output property in the child component and listen for events to update the messageFromChild property in the parent component.

When to Use Child-to-Parent Communication

Child-to-parent communication is often used when you want to:

• Trigger actions in the parent component based on events in the child component.
• Pass data from a child component to a parent component in response to user interactions.

Conclusion

In Angular, parent-to-child and child-to-parent communication are essential for building powerful and interactive applications. These communication patterns allow components to work together seamlessly, passing data and triggering actions in response to user interactions.

By using input and output properties along with the appropriate decorators and event emitters, you can create highly modular and reusable components that work together to create dynamic web applications. Understanding and mastering these communication patterns is a key skill for Angular developers.