Share Data Between Components In Angular 9

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.

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.

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.

<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.

export class ChildComponent {
  public application: string;
}

From the parent component template, we can create a template reference

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

And With the @ViewChild template reference, we can access the child component properties.

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()';
  }
}

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().

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:

<!-- 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.

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.

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().

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