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

Last Updated : 11 Jun, 2020

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.
javascript
<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.

javascript

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

javascript

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 {
  }

}