Share data between non related components - Angular 2/5

AngularShare DataNon related componentBehaviorSubject

In this article we will be discussing about sharing a data between non related components. Here I have used angular BehaviorSubject. We have used $rootScope in Angular js 1 as a global variable. However there is no such concept in Angular 2 (+), still we can achieve the same using below concept. Let us check with one example. Here I am going to create a simple service file. Check the code below.

Service file

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';


@Injectable()
export class commonService {
    private data = new BehaviorSubject('');
    currentData = this.data.asObservable()

    constructor() { }

    updateMessage(item: any) {
        this.data.next(item);
    }

}

Here we have created a new BehaviorSubject and assigned to currentData. We will be subscribing the currentData in component. Now let us check our components.

First components

import { Component } from '@angular/core';
import { commonService } from '../../services/commonService';

@Component({
    selector: 'sub-component-one',
    template: '<div>'
        + '<h3>Sub Component one</h3>'
        + '<input type="text" [(ngModel)]="queryTerm">'
        + '<button class="btn" (click)="shareData(queryTerm)">Trigger</button>'
        + '</div>'
})

export class SubComponentOne {
    queryTerm: any;
    currentValue: any;
    constructor(private _data: commonService) { }

    shareData() {
        this.currentValue = this.queryTerm;
        this._data.updateMessage(this.currentValue);
    }
}

Here I have added a text box and also a button to click. On click on Trigger button user entered value should display in the second component. Clicking on shareData method we are updating the method in the service. Now let us check second component.

Second component

import { Component, OnInit } from '@angular/core';
import { commonService } from '../../services/commonService';

@Component({
    selector: 'sub-component-two',
    template: '<div>'
        + '<h3>Sub Component two</h3>'
        + '<p>Current Value : {{currentValue}}</p>'
        + '</div>'
})

export class SubComponentTwo {
    currentValue: any;

    constructor(private _data: commonService) { }

    ngOnInit() {
        this._data.currentData.subscribe(currentData => this.currentValue = currentData)
    }
}

Here we are subscribing the data in ngOnInit. So whenever the user clicks on the trigger method in the first component, that will be get updated in the second component ngOnInit.

We are done.

There are many other ways also there to share data between components, for that read here - 7 method to share the data between components.

Angular 2+Angular 4/5Share DataNon related componentBehaviorSubject

Related Info

1. File/image upload and send data to backend - Angular

2. Show preview image while uploading - Angular