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

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:parentchild
parentchild
parent
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>
<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’.
‘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;  }
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 componentimport { 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 {  }  }
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:
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?