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() { } }