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

  edit
  close

  play_arrow

  link
  brightness_4
  code

  <child [id] = "parentid"></child>

  chevron_right

  filter_none

• 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.
  filter_none

  edit
  close

  play_arrow

  link
  brightness_4
  code

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

  chevron_right

  filter_none

• Now write the code for the child component
  filter_none

  edit
  close

  play_arrow

  link
  brightness_4
  code

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

  chevron_right

  filter_none

Output:

vaibhav19verma

Check out this Author's contributed articles.