Sharing Data Between Component Using Input And Output Emitter.docx

Sharing Data Between Component Using Input and Output Emitter 1. Parent To Child using Input Emitter Child Component.ts Import {Input} from ‘@angular/core’; @Input() message:string;//Input Decorator value to receive from parent ChildComponent.html {{message}} ParentComponent.ts // this will load the child into parent To sent value to child we modify it to // the value inside [] is the value of childInput Emitter Value messageToSend=”hello World”;

2. Child to Parent Another way of sharing data is to emit from the child which can be listen by parent(Mostly like button clicks etc.) ChildComponent.ts Import { Output, EventEmitter } from ‘’@angular/core’; messageToSend:string=”Im from Child”; @Output() messageEvent=new EventEmitter<string>(); //messageEvent is a variable for output emitter sendMessage() { this.messageEvent.emit(this. messageToSend); } ChildCompoent.html This is to be sent to parent: {{ messageToSend }} Send Message ParentComponent.ts messageFromChild:string; receiveMessage($event) { this.messageFromChild =$event; } ParentComponent.ts // this will load the child into parent To sent value to child we modify it to // the value inside () is the value of childOutput Emitter Value ParentComponent.html {{ messageFromChild }}