We use BehaviourSubject
to share the data with multiple components using a shared service.
For example, if we want to notify other components of the data change. Then we have to do two simple tasks.
-
We have to create a
BehaviourSubject
& anObservable
of thatBehaviourSubject
in a service. - Secondly, we can subscribe to that
Observable
in other components.
I have created below service to notify another component to log out the user from the application.
1. data.service.ts - Read the comments marked with 1, 2, 3 & 4 steps. They explains their usage itself.
import { Injectable } from '@angular/core';
//1. Import BehaviorSubject from rxjs module
import { BehaviorSubject } from 'rxjs/BehaviorSubject'
@Injectable({
providedIn: 'root'
})
export class DataService {
//2. Create the data which we want to share with all the components
private logoutStatus = new BehaviorSubject(false);
//3. Now we want to broadcast this message or data, so we create an observable
getLogoutStatus = this.logoutStatus.asObservable();
constructor() { }
//4. Create a method that updates the data (Behaviour Subject)
logoutUser(){
this.logoutStatus.next(true);
}
}
2. logout.ts - In this, the logoutUser()
method of DataService
that will update the value of BehaviourSubject
so that all & the observable (i.e. getLogoutStatus
)of this BehaviourSubject
will broadcast the message to all subscribers.
import { Component } from '@angular/core';
import { DataService } from './../../services/data.service'
@Component({
selector: 'app-logout',
templateUrl: './logout.component.html',
styleUrls: ['./logout.component.scss']
})
export class LogoutComponent implements OnInit {
constructor(private dataService : DataService) { }
ngOnInit() {
console.log("ngOnInit called");
}
onLogout(){
this.dataService.logoutUser();
}
}
3. app.component.ts - In this component, we have subscribed thegetLogoutStatus
observable. The subscription handle will be executed every time whenever there is a change in the value of BehaviourSubject
.
import { Component } from '@angular/core';
import { DataService } from './services/data.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'MyApp';
constructor(private dataService : DataService) { }
ngOnInit() {
this.dataService.getLogoutStatus.subscribe((data) => {
if(data === true){
alert("User has been loggedout");
}
})
}
}