Contents hide 1) Share Data Between Components From Parent To Child 1.1) Using @Input() Decorator 1.2) Using @ViewChild() Decorator 2) Share Data Between Components From Child To Parent 2.1) Send Event With @Output() Decorator 2.2) Capture Event 3) Share Data Between Any Components Using Service 3.1) Service 3.2) Subscribe The Shared Data 3.3) Update the Shared Data 4) Demo Code And DemoIn this tutorial, we will see how to Share Data Between Components In Angular 9. There are different ways to communicate between angular components but the 4 main properties are:@Input β For parent to child communication.@ViewChild β For parent to child communication.@Output β For child to parent communication using EventEmitter.service β For any components which are not in parent child structure.Share Data Between Components From Parent To ChildFirst will see how can we approach the parent to child component communication using 2 different properties.Using @Input() DecoratorConsider the parent component having some data that need to send to the child component.parent.component.ts export class ParentComponent { public parentValue: string = 'This Data is Coming From Parent To Child - via @Input()'; } we can accept the data of parent component inside the child component by using @Input()property inside the child component.child.component.ts import { Component, OnInit, Input } from '@angular/core'; ... export class ChildComponent { @Input() public parentValue: string; } And from the parent template, we can pass the data or a value like this.parent.component.html <app-child [parentValue]='parentValue'></app-child> Using @ViewChild() DecoratorAnother workaround for sharing data to child component from a parent component is we can do with a @ViewChild. Consider if a child component having a declared and itβs only used inside a child component itself. We can access that property from a parent component using a template refrence.child.component.ts export class ChildComponent { public application: string; } From the parent component template, we can create a template referenceparent.component.html <app-child #child ></app-child> And With the @ViewChild template reference, we can access the child component properties.parent.component.ts import { Component, ViewChild } from '@angular/core'; import { ChildComponent } from '../child/child.component'; export class ParentComponent { @ViewChild('child') public child: ChildComponent; /* * Sets the value of the child component. */ public setChildProperty(): void { this.child.application = 'This Data is Coming From Parent To Child - via @ViewChild()'; } } Note : you can only access the public property. you cannot access private, read-only, or a static property.Share Data Between Components From Child To ParentFor sharing data from child to parent component we have to use two properties i.e. @Output decorator and EventEmitter() of angularSend Event With @Output() DecoratorSo from child component we can emit data to the parent component using EventEmitter().child.component.ts import { Component, EventEmitter, Output } from '@angular/core'; export class ChildComponent { @Output() public afterClick: EventEmitter<string> = new EventEmitter(); /* * something to be sent to parent component after some event. */ public onSubmit(): void { this.afterClick.emit('This Data is Coming From Child To Parent - via @Output()'); } } Capture EventWe can capture an emitted event in parent component inside the template like below example:parent.component.html <!-- Assign value directly to variable --> <app-child (afterClick)='alertmsg = $event'></app-child> <!-- OR --> <!-- Create method to use the value --> <app-child (afterClick)='showAlert($event)'></app-child> Share Data Between Any Components Using ServiceFor sharing data via service will create a message service in which we will define two method one to update value and to get value.ServiceWe will use the Subject to create our shared service in this example. Subjects are observableβs themselves but what sets them apart is that they are also observers. It means that a subject can emit data, on top of having the capability to be subscribed to.message.service.ts import { Injectable } from '@angular/core'; import { Subject, Observable } from 'rxjs'; @Injectable() export class MessageService { private siblingMsg = new Subject<string>(); constructor() { } /* * @return {Observable<string>} : siblingMsg */ public getMessage(): Observable<string> { return this.siblingMsg.asObservable(); } /* * @param {string} message : siblingMsg */ public updateMessage(message: string): void { this.siblingMsg.next(message); } } Subscribe The Shared DataTo read / display data we have to subscribe that message service getMessage() method so from where ever data is updated it will reflect on component everywhere it is subscribed.app.component.ts import { Component, OnInit, OnDestroy } from '@angular/core'; import { MessageService } from './message.service'; ... export class AppComponent implements OnInit{ public messageForSibling: string; public subscription: Subscription; constructor( private msgservice: MessageService // inject service ) {} public ngOnDestroy(): void { this.subscription.unsubscribe(); // onDestroy cancels the subscribe request } public ngOnInit(): void { // set subscribe to message service this.subscription = this.messageService.getMessage().subscribe(msg => this.messageForSibling = msg); } } Update the Shared DataUpdate the shared message from anywhere of the component using the service method which is updateMessage().child.component.ts import { MessageService } from './message.service'; ... export class ChildComponent { constructor( private msgservice: MessageService // inject service ) {} public sendToSibling(): void { this.msgService.updateMessage('This Data is Coming From Child to Sibling - via service'); } } After updating the data it will automatically reflect where ever the data is been subscribed.DemoError: Embedded data could not be displayed.Get More tutorials on Angular 9+Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblrRelatedTags: @Input, @Output, @ViewChild, Angular 8, shared Service