How to communicate from parent component to the child component in Angular 9 ?

Angular makes the communication between components very easy. In this article, we will learn how to communicate from a parent component to the child component.

Approach:

• Let’s create two components:
  1. parent
  2. child
• In the parent component, declare the property that you want to receive in the child component, say ‘ParentId’.
• While including the child component inside the parent component, bind the ‘ParentId’ property to the child component using property binding.

  <child [id] = "parentid"></child>
• Now in the child component import Input from @angular/core and create a property decorated by @input decorator to receive ‘ParentId’ from parent component. The name of property should be the same as used for binding the ‘ParentId’ property i.e ‘id’.

• ‘ParentId’ will be successfully received in the child component as ‘id’.

Example:

• In this example, we will create a property 'ParentId' and receive it in the child component.
  Let’s write the code for the parent component.

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
  
  // code for parent component view.
  
    template:`
    <div style="text-align: center;">
    <h1>
      parent component - {{parentid}}
    </h1>
    </div>
  
  // Bind the ParentId to child component.
  
    <child [id] = "parentid"></child>
    `,
    styleUrls: []
  })
  export class AppComponent {
  
  // This property is to be sent to the child component.
  
  parentid: number = 1;
  
  }
• Now write the code for the child component

  import { Component, OnInit, Input} from '@angular/core';
  
  @Component({
    selector: 'child',
    template: `
    <div style="text-align: center;">
    <h2>child component</h2>
  
  // property successfully received from the parent component.
  
    parent id is {{id}}
    </div>
    `,
    styles: []
  })
  export class TestComponent implements OnInit {
  
  // @input decorator used to fetch the
  // property from the parent component.
  
    @Input()
    id: number;
  
    ngOnInit(): void {
    }
  
  }

Output: