Why Use BehaviorSubject?
Using BehaviorSubject in Angular applications provides several advantages:
1. State Management
- It helps maintain and share state across multiple components without direct dependencies.
- Components can subscribe to the BehaviorSubject to get the latest data whenever it changes.
2. Default Initial Value
- Unlike Subject, a BehaviorSubject always has an initial value, ensuring subscribers always get a valid value.
3. Multiple Subscribers Support
- Multiple components can subscribe to a BehaviorSubject and get notified whenever the value changes.
4. Avoid Callback Hell
- Simplifies handling asynchronous operations and ensures smooth communication between components.
Examples
Example 1: Basic BehaviorSubject Usage
import { BehaviorSubject } from 'rxjs';
// Creating a BehaviorSubject with an initial value of 10
const numberSubject = new BehaviorSubject<number>(10);
// Subscribing to the BehaviorSubject
numberSubject.subscribe(value => {
console.log('Subscriber 1:', value);
});
// Emitting a new value
numberSubject.next(20);
// Another subscription
numberSubject.subscribe(value => {
console.log('Subscriber 2:', value);
});
Output:
Subscriber 1: 10
Subscriber 1: 20
Subscriber 2: 20
Explanation:
- The first subscriber gets the initial value 10.
- After calling next(20), both subscribers receive the new value 20.
- The second subscriber gets the latest value 20 immediately after subscribing.
Example 2: Using BehaviorSubject in an Angular Service
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class DataService {
private messageSource = new BehaviorSubject<string>('Initial Message');
currentMessage = this.messageSource.asObservable();
updateMessage(message: string) {
this.messageSource.next(message);
}
}
Explanation:
- messageSource is a private BehaviorSubject that holds a string value.
- currentMessage is an observable that other components can subscribe to.
- updateMessage() updates the stored message and notifies subscribers.
Example 3: Subscribing to BehaviorSubject in a Component
Component 1: Sender Component
import { Component } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-sender',
template: `<button (click)="sendMessage()">Send Message</button>`
})
export class SenderComponent {
constructor(private dataService: DataService) {}
sendMessage() {
this.dataService.updateMessage('Hello from Sender Component!');
}
}
Component 2: Receiver Component
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-receiver',
template: `<p>Received Message: {{ message }}</p>`
})
export class ReceiverComponent implements OnInit {
message: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.currentMessage.subscribe(msg => this.message = msg);
}
}
Explanation:
- SenderComponent updates the message in the BehaviorSubject.
- ReceiverComponent subscribes to currentMessage and updates its view whenever the message changes.
Expected Output:
When the button is clicked in SenderComponent, ReceiverComponent updates its message.
Practical Example
Let’s see how to create & use a BehaviorSubject in an Angular application:
1. Install RxJS (if not already installed):
RxJS is usually included by default in Angular projects. If not, you can install it using:
npm install rxjs
2. Create a BehaviorSubject in a Service:
Let’s create a service called `DataService` to manage a BehaviorSubject.
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
// Create a BehaviorSubject with an initial value of 0
private dataSubject = new BehaviorSubject<number>(0);
// Expose the BehaviorSubject as an observable
public data$ = this.dataSubject.asObservable();
// Method to update the value of the BehaviorSubject
updateData(newValue: number): void {
this.dataSubject.next(newValue);
}
}
3. Use the BehaviorSubject in a Component:
Now, let’s use the `DataService` in a component to subscribe to the BehaviorSubject & update its value.
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
<h1>Current Value: {{ currentValue }}</h1>
<button (click)="updateValue()">Update Value</button>
`
})
export class AppComponent implements OnInit {
currentValue: number;
constructor(private dataService: DataService) {}
ngOnInit(): void {
// Subscribe to the BehaviorSubject
this.dataService.data$.subscribe(value => {
this.currentValue = value;
});
}
// Method to update the value
updateValue(): void {
const newValue = this.currentValue + 1;
this.dataService.updateData(newValue);
}
}
4. Explanation of the Code:
- The `DataService` creates a BehaviorSubject with an initial value of `0`.
- The `data$` observable allows components to subscribe to the BehaviorSubject.
- The `updateData()` method updates the value of the BehaviorSubject using `next()`.
- In the `AppComponent`, we subscribe to `data$` to get the latest value & display it in the template.
- Clicking the button updates the value & automatically reflects it in the UI.
Practical Implementation
BehaviorSubject is widely used in Angular applications to manage shared state or data between components. A common use case is sharing data between a parent component & its child components or between unrelated components using a service. Let’s implement a practical example where we use BehaviorSubject to share user data across multiple components.
Scenario:
We’ll create a simple Angular application where:
1. A service (`UserService`) manages user data using a BehaviorSubject.
2. A parent component (`AppComponent`) updates the user data.
3. A child component (`ProfileComponent`) displays the updated user data in real-time.
Step-by-Step Implementation
1. Create the `UserService`:
This service will hold the BehaviorSubject & provide methods to update & access the user data.
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
// Create a BehaviorSubject with an initial value (empty object)
private userSubject = new BehaviorSubject<any>({});
// Expose the BehaviorSubject as an observable
public user$ = this.userSubject.asObservable();
// Method to update the user data
updateUser(newUser: any): void {
this.userSubject.next(newUser);
}
}
2. Update the `AppComponent`:
This component will allow the user to input their name & age, & update the BehaviorSubject in the `UserService`.
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-root',
template: `
<h1>Update User Data</h1>
<label for="name">Name:</label>
<input id="name" [(ngModel)]="name" placeholder="Enter your name">
<label for="age">Age:</label>
<input id="age" [(ngModel)]="age" placeholder="Enter your age">
<button (click)="updateUser()">Update User</button>
<app-profile></app-profile>
`
})
export class AppComponent {
name: string = '';
age: number = 0;
constructor(private userService: UserService) {}
// Method to update the user data
updateUser(): void {
const newUser = { name: this.name, age: this.age };
this.userService.updateUser(newUser);
}
}
3. Create the `ProfileComponent`:
This component will subscribe to the BehaviorSubject & display the updated user data in real-time.
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-profile',
template: `
<h2>User Profile</h2>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
`
})
export class ProfileComponent implements OnInit {
user: any = {};
constructor(private userService: UserService) {}
ngOnInit(): void {
// Subscribe to the BehaviorSubject
this.userService.user$.subscribe(user => {
this.user = user;
});
}
}
4. Update the `AppModule`:
Make sure to declare & import all components & modules in the `AppModule`.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ProfileComponent } from './profile.component';
@NgModule({
declarations: [
AppComponent,
ProfileComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
How It Works:
1. The `UserService` holds a BehaviorSubject with an initial value of an empty object.
2. The `AppComponent` allows the user to input their name & age. When the "Update User" button is clicked, the `updateUser()` method updates the BehaviorSubject with the new user data.
3. The `ProfileComponent` subscribes to the BehaviorSubject & automatically updates the displayed user data whenever it changes.
Output:
When you enter a name & age in the `AppComponent` & click "Update User," the `ProfileComponent` immediately displays the updated user data.
Frequently Asked Questions
What is the difference between Subject and BehaviorSubject in Angular?
A Subject does not store the last emitted value and only notifies existing subscribers. In contrast, a BehaviorSubject holds the latest value and immediately provides it to new subscribers.
How does BehaviorSubject help in state management?
BehaviorSubject keeps track of the current state and notifies all subscribers whenever the state changes. It allows multiple components to share and react to the same data changes efficiently.
Can we use BehaviorSubject with HTTP requests in Angular?
Yes! BehaviorSubject is often used with HTTP requests to store and share API response data across components, reducing redundant network calls.
Conclusion
In this article, we discussed BehaviorSubject in Angular, a special type of RxJS Subject that stores the latest emitted value and allows subscribers to receive the most recent data immediately. It is useful for managing state and sharing data between components. Understanding BehaviorSubject helps in building reactive, efficient, and well-structured Angular applications.
19+ registered 
