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

Recommended Posts:

    Article Tags :

    Be the First to upvote.


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