What is the Difference Between BehaviorSubject and Observable in Angular ?
Angular being a powerful framework offers various features and tools. One such powerful feature is to handle asynchronous operations by implementing the BehaviorSubject and Observable, which are the key components of the RxJS library. It also helps to manage the flow of data reactively. This article covers the basics of BehaviorSubject and Observable in Angular, along with understanding their basic implementation, & the differences between them.
Table of Content
- BehaviorSubject
- Observable
- Difference between BehaviorSubject and Observable
BehaviorSubject
BehaviorSubject is a concept in the RxJS library that is an extension of observable. This not only provides a stream of data but maintains the most recent value or latest value to subscribers. It acts as both observer and observable. Here when a late subscriber arrives, they immediately receive the latest value present. This is an advantage to BehaviorSubject when the current state is crucial, and subscribers need to access values immediately to the latest emitted value.
Syntax
import { BehaviorSubject } from 'rxjs'; // Create a BehaviorSubject with an initial value const myBehaviorSubject = new BehaviorSubject<string>('Initial Value'); // Subscribe to the BehaviorSubject myBehaviorSubject.subscribe(value => { // Handle the received value }); // Update the value of the BehaviorSubject myBehaviorSubject.next('New Value');
Example: This example involves a button when clicked updates the value and displays on the screen. We also have another button to subscribe to BehaviorSubject. Through this, we demonstrate how values are updated after subscribing to BehaviorSubject.
HTML
<!--difference-example.component.html--> < div > < p >Current Value: {{ currentValue }}</ p > < button (click)="updateValue()"> Update Value </ button > < button (click)="delayedSubscribeToBehaviorSubject()"> Subscribe to BehaviorSubject </ button > < div * ngIf = "behaviorSubjectSubscriptionValue" > < p > Subscribed to BehaviorSubject: {{ behaviorSubjectSubscriptionValue }} </ p > </ div > </ div > |
Javascript
//difference-example.component.ts import { Component, OnInit } from '@angular/core' ; import { BehaviorSubject, Observable } from 'rxjs' ; @Component({ selector: 'app-difference-example' , templateUrl: './difference-example.component.html' , }) export class DifferenceExampleComponent implements OnInit { private myBehaviorSubject = new BehaviorSubject<string>( 'Initial Value' ); currentValue!: string; behaviorSubjectSubscriptionValue!: string; ngOnInit() { // Subscribe to the BehaviorSubject this .myBehaviorSubject.subscribe(value => { this .currentValue = value; }); } updateValue() { // Update the value of the // BehaviorSubject and Observable const newValue = `New Value ${Math.floor(Math.random() * 100)}`; this .myBehaviorSubject.next(newValue); } delayedSubscribeToBehaviorSubject() { // Delayed subscription to BehaviorSubject setTimeout(() => { this .myBehaviorSubject.subscribe(value => { // Update value for display in HTML this .behaviorSubjectSubscriptionValue = value; }); }, 1000); // Delayed subscription after 1 second } } |
Output: As you can observe through the above example, the updated value just updates the value then after subscribing to BehaviorSubject, the values are initialized from the latest value and are updated the same.
Observable
An observable represents a stream of data that can be observed over a period of time. It helps in asynchronous operations well which helps components to react to the changes by subscribing to it. Late subscribers receive values only after subscription, unlike BehaviorSubject which gets the latest value. These are like immutable which can’t access the previous values before subscription.
Syntax
import { Observable } from 'rxjs'; // Create a regular Observable with no initial value const myObservable = new Observable<string>(observer => { observer.next('Initial Value'); // No initial value, just an example }); // Subscribe to the Observable myObservable.subscribe(value => { // Handle the received value }); // Function to emit a new value in the Observable syntax const emitValue = () => { // Trigger the emission of a new value };
Example: The below program describes the usage of BehaviorSubject and Observable with the help of the same goal. So, we can figure out the difference between them and their work.
The example is the same as for BehaviorSubject, which involves a button that on clicked updates the value and displays it on the screen. We also have another button to subscribe to Observable. Through this, we demonstrate how values are updated after subscribing to observable.
HTML
<!-- difference-example.component.html --> < div > < p > Current Value: {{ currentValue }} </ p > < button (click)="updateValue()"> Update Value </ button > < button (click)="delayedSubscribeToObservable()"> Subscribe to Observable </ button > < div * ngIf = "observableSubscriptionValue" > < p > Subscribed to Observable: {{ observableSubscriptionValue }} </ p > </ div > </ div > |
Javascript
//difference-example.component.ts import { Component, OnInit } from '@angular/core' ; import { Observable } from 'rxjs' ; @Component({ selector: 'app-difference-example' , templateUrl: './difference-example.component.html' , }) export class DifferenceExampleComponent implements OnInit { private myObservable = new Observable<string>(observer => { // No initial value, just an example observer.next( 'Initial Value' ); this .emitValue = () => observer.next( `New Value ${Math.floor(Math.random() * 100)}`); }); currentValue!: string; observableSubscriptionValue!: string; // Function to emit a new value emitValue!: () => void; ngOnInit() { // Subscribe to the Observable this .myObservable.subscribe(value => { this .currentValue = value; }); } updateValue() { // Update the value of the Observable this .emitValue(); } delayedSubscribeToObservable() { // Delayed subscription to Observable setTimeout(() => { this .myObservable.subscribe(value => { // Update value for display in HTML this .observableSubscriptionValue = value; }); }, 1000); // Delayed subscription after 1 sec } } |
Output: As you can observe through the above example, the updated value just updates the value then after subscribing to Observable the values are not initialized and started from a new initial state unlike BehaviorSubject which is initialized with the latest value.
Difference between BehaviorSubject and Observable
Category |
BehaviorSubject |
Observable |
---|---|---|
Initialization |
Has initial value emitted immediately after subscription. | No initial value |
Immediate Emit |
Emits the latest value and all subsequent new values to new subscribers. | Emits values over time which are after subscription. |
Last value memory |
Retains the latest value. | Does not retain previous ones. |
Use case |
Useful when we need subscribers to get the current value. | Useful when past values are not very important. |
Example |
Maintaining the current user state in an application. | Periodic data updates. |
Flexibility |
More complex, used when components need immediate access to the current state or values. | Simple, used when there is a need for one-way data flow. |