Angular Communication between components
There are 3 ways to communicate between angular components.
- Input and output decorator
- Using Services
- View Child Decorator.
Input and output decorator:
@Input Decorator
This is require to send data from parent to child component.
Steps:
import input library from @angular/core in child component
decorate the property with @Input() which needs to receive from parent component.
childComponent.ts
import {component,Input} from ‘@angular/core’;
export class ChildComponent{
@Input()
target:<String>;
}
childComponent.html
<p>{{target}}</p>
Bind the property in parents component’s template
use child selector as a decorator in parent component and use property binding to bind property with child component property.
parentComponent.ts
export class ParentComponent{
item:<String> =” ”;
}
parentComponent.html
<div class =”container”>
<app-child-component [target]=item></app-child-component>
</div>
@Output Decorator
Use @Output to send data from child to parent component.
Steps to use
import Output, EventEmitter from ‘@angular/core’ in child component.
create an event and decorate with @output() decorator.
@Output() newItemEvent = new EventEmitter<string>();
raise an event emitter for sharing data to parent component.
export class childComponent{
@Output() exportItem = new EventEmittet<string>()
raiseEvent (){
this.exportItem.emit(“hai hello”)
}
}
Now attach an event binding in parent component to recieve element from child component.
ParentComponent.html
<parent-component>
<app-child-component (exportItem)=”addItem($event)”></app-child-component>
</parent-component>