How to send data to child component using Input and Output decorators – Angular

The easiest way to pass / send data to child component is using decorator as below

1. Add a property to child component tag with the data required to pass as below

here we are passing data in “mydata” variable using “myParentData” Identifier

<app-child [myParentData]="mydata"></app-child>

2. Import Input decorator from @angualr/core in the child component

import { Component, OnInit, Input } from '@angular/core';

3. Add Input Decorator in child component

@Input() public myParentData;

// Or create new variable like below 

@Input('myParentData') public myNewVariable;   

After Adding the decorator you can use “myParentData” in child component using interpolation

    <h3>  {{myParentData}} </h3>

  // Or if you created new variable  

   <h3>  {{myNewVariable}} </h3>

Parent.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
     <h1>
       This is parent Compoenent 
    </h1>  <hr>
   <app-child [myParentData]="mydata"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  public mydata = " this is Message from Parent Component"
  constructor() { }

  ngOnInit() {
  }

}

child.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  <h2>
     This is Child Compoenent 
   </h2>
    <h3>  {{myParentData}} </h3>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() public myParentData;
  constructor() { }

  ngOnInit() {
  }

}