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 Demo In 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 Child First will see how can we approach the parent to child component communication using 2 different properties. Using @Input() Decorator Consider 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() Decorator Another 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 reference parent.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 Parent For sharing data from child to parent component we have to use two properties i.e. @Output decorator and EventEmitter() of angular Send Event With @Output() Decorator So 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 Event We 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 Service For sharing data via service will create a message service in which we will define two method one to update value and to get value. Service We 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 Data To 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 Data Update 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. Demo Error: Embedded data could not be displayed. Get More tutorials on Angular 9+ Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: @Input, @Output, @ViewChild, Angular 8, shared Service