Parent component:

<app-child-component [item]="data"></app-child-component>

​

Child component.ts

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

export class ItemDetailComponent {

  @Input() item = ''; // decorate the property with @Input()

}

//child 

  childData = 'Hello from child';

//parent

    <app-child #childRef></app-child>

//parent.ts

  @ViewChild('childRef') childComponent: ChildComponent;

    this.dataFromChild = this.childComponent.childData;

​

//app.html:

<h1>this is perent component</h1>

<app-child [items]="employee"></app-child>

//app.component.ts:

 employee = {

    id: 1,

    name: 'chintan',

    address: 'junagadh',

  };

//child.component.ts:

@Input() items: any;

//child.html:

<h2>{{ items.id }}</h2>

<h2>{{ items.name }}</h2>

<h2>{{ items.address }}</h2>

Parent-Component

​

eventsSubject: Subject<void> = new Subject<void>();

​

emitEventToChild() {

  this.eventsSubject.next();

}

Parent-HTML

<child [events]="eventsSubject.asObservable()"> </child>

Child-Component

​

private eventsSubscription: Subscription;

​

@Input() events: Observable<void>;

​

ngOnInit(){

  this.eventsSubscription = this.events.subscribe(() => doSomething());

}

​

ngOnDestroy() {

  this.eventsSubscription.unsubscribe();

}