Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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.


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

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


  • 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';
      selector: 'app-root',
    // code for parent component view.
      <div style="text-align: center;">
        parent component - {{parentid}}
    // 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

    import { Component, OnInit, Input} from '@angular/core';
      selector: 'child',
      template: `
      <div style="text-align: center;">
      <h2>child component</h2>
    // property successfully received from the parent component.
      parent id is {{id}}
      styles: []
    export class TestComponent implements OnInit {
    // @input decorator used to fetch the 
    // property from the parent component.
      id: number;
      ngOnInit(): void {



Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 11 Jun, 2020
Like Article
Save Article
Similar Reads
Related Tutorials