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

    
    

  • 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

    
    

  • 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

    
    

Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.