DEV Community

Cover image for Using RxJS Subjects and BehaviorSubjects in Angular
Artem Turlenko
Artem Turlenko

Posted on

Using RxJS Subjects and BehaviorSubjects in Angular

#angular #webdev #programming #frontend

RxJS Subjects and BehaviorSubjects are powerful constructs for managing reactive data and state in Angular applications. They allow components and services to communicate efficiently through observable streams.

What is a Subject?

A Subject is a special type of Observable that allows values to be multicasted to multiple subscribers. Unlike regular Observables, Subjects are both an Observable and an Observer, allowing them to emit new values after initial subscription.

Basic Subject Example 

import { Subject } from 'rxjs';

const subject = new Subject<number>();

subject.subscribe(value => console.log('Subscriber 1:', value));
subject.next(1);
subject.next(2);

subject.subscribe(value => console.log('Subscriber 2:', value));
subject.next(3);

// Output:
// Subscriber 1: 1
// Subscriber 1: 2
// Subscriber 1: 3
// Subscriber 2: 3
Enter fullscreen mode Exit fullscreen mode

What is a BehaviorSubject?

A BehaviorSubject is similar to a Subject but requires an initial value and always emits the current value to new subscribers.

Basic BehaviorSubject Example 

import { BehaviorSubject } from 'rxjs';

const behaviorSubject = new BehaviorSubject<number>(0);

behaviorSubject.subscribe(value => console.log('Subscriber 1:', value));
behaviorSubject.next(1);

behaviorSubject.subscribe(value => console.log('Subscriber 2:', value));
behaviorSubject.next(2);

// Output:
// Subscriber 1: 0
// Subscriber 1: 1
// Subscriber 2: 1
// Subscriber 1: 2
// Subscriber 2: 2
Enter fullscreen mode Exit fullscreen mode

Practical Use in Angular

Subjects and BehaviorSubjects are commonly used for state management, communication between components, and broadcasting events.

Example: State Management with BehaviorSubject

Create a simple state service:

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

@Injectable({ providedIn: 'root' })
export class StateService {
  private userLoggedInSubject = new BehaviorSubject<boolean>(false);
  userLoggedIn$ = this.userLoggedInSubject.asObservable();

  login() {
    this.userLoggedInSubject.next(true);
  }

  logout() {
    this.userLoggedInSubject.next(false);
  }
}
Enter fullscreen mode Exit fullscreen mode

Subscribe to state in components:

import { Component, OnInit } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-dashboard',
  template: '<div *ngIf="loggedIn">Welcome!</div>'
})
export class DashboardComponent implements OnInit {
  loggedIn!: boolean;

  constructor(private stateService: StateService) {}

  ngOnInit() {
    this.stateService.userLoggedIn$.subscribe(status => {
      this.loggedIn = status;
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

Best Practices

  • Always unsubscribe from subjects to prevent memory leaks (use async pipe or unsubscribe in ngOnDestroy).
  • Prefer BehaviorSubject for state management scenarios to always have the latest state available.
  • Encapsulate Subjects within services to manage state clearly and predictably.

Conclusion

Subjects and BehaviorSubjects significantly enhance reactive programming in Angular, enabling efficient and clear communication across your app.

Have you used Subjects or BehaviorSubjects in your Angular projects? Share your insights and tips below! 🚀

Top comments (2)

Collapse
 
jean_lucas profile image
Jean Lucas • • Edited

Well Done. Nice content, RxJS is powerful and is great that you brought this knowledge to the table. thanks for your clear explanation.

Collapse
 
artem_turlenko profile image
Artem Turlenko •

Thank you for your kind words! I'm glad you found the explanation clear and helpful.