Backend interview prep

Start

Angular BehaviorSubject

Learn Angular BehaviorSubject with RxJS including state management, authentication, shopping cart, current value, comparison with Subject, architecture diagrams, best practices, and interview questions.

BehaviorSubject is one of the most widely used RxJS classes in Angular applications.

It is the foundation of many enterprise features, including:

  • Authentication State
  • Shopping Cart
  • User Profile
  • Theme Switching
  • Language Selection
  • Dashboard State
  • Notifications
  • Real-Time Data
  • Application State Management

Unlike a normal Subject, a BehaviorSubject always stores the latest value and immediately sends it to every new subscriber.

BehaviorSubject is one of the most frequently asked Angular interview topics.

Table of Contents

  • What is BehaviorSubject?
  • Why Use BehaviorSubject?
  • BehaviorSubject Architecture
  • Creating a BehaviorSubject
  • BehaviorSubject Lifecycle
  • BehaviorSubject vs Subject
  • Accessing Current Value
  • State Management
  • Authentication Example
  • Shopping Cart Example
  • Enterprise Banking Example
  • Performance Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What is BehaviorSubject?

A BehaviorSubject is a special type of RxJS Subject that:

  • Requires an initial value
  • Stores the latest emitted value
  • Immediately emits the current value to new subscribers
  • Supports multicasting

Example

BehaviorSubject

Current Value

↓

Subscriber A

Subscriber B

Subscriber C

BehaviorSubject Architecture

flowchart TD

BehaviorSubject

BehaviorSubject --> CurrentValue

CurrentValue --> ComponentA

CurrentValue --> ComponentB

CurrentValue --> ComponentC

Why Use BehaviorSubject?

Without BehaviorSubject

  • Components request the same data repeatedly
  • Difficult state synchronization
  • Duplicate API calls
  • Poor user experience

With BehaviorSubject

  • Shared application state
  • Current value always available
  • Centralized state management
  • Better performance
  • Easier component communication

Creating a BehaviorSubject

import { BehaviorSubject } from 'rxjs';

const counter$ =

new BehaviorSubject<number>(0);

The initial value is 0.

Updating values

counter$.next(1);

counter$.next(2);

counter$.next(3);

BehaviorSubject Lifecycle

sequenceDiagram

participant Service

participant BehaviorSubject

participant Component

Service->>BehaviorSubject: Initial Value

BehaviorSubject-->>Component: Current Value

Service->>BehaviorSubject: next()

BehaviorSubject-->>Component: Updated Value

Service->>BehaviorSubject: next()

BehaviorSubject-->>Component: Updated Value

Subscribing to BehaviorSubject

counter$

.subscribe(value => {

console.log(value);

});

Output

0

1

2

3

The subscriber first receives the current value, followed by future updates.

New Subscriber Behavior

Suppose the following values have already been emitted.

0

1

2

3

A new subscriber joins.

It immediately receives:

3

because 3 is the current value.

New Subscriber Architecture

flowchart LR

BehaviorSubject

BehaviorSubject --> CurrentValue

CurrentValue --> NewSubscriber

BehaviorSubject vs Subject

Feature BehaviorSubject Subject
Initial Value Required Not Required
Current Value Available Not Available
New Subscriber Gets Latest Value Yes No
Multicasting Yes Yes
Common Use State Management Event Broadcasting

Accessing the Current Value

BehaviorSubject provides access to its latest value.

const counter =

new BehaviorSubject<number>(10);

console.log(

counter.value

);

Output

10

Tip: Reading .value is useful in some scenarios, but many Angular applications prefer staying reactive by subscribing to the Observable instead of reading synchronous state directly.

BehaviorSubject Flow

flowchart TD
    A["BehaviorSubject"]
    B["next()"]
    C["Current Value"]
    D["Subscribers"]

    A --> B
    B --> C
    C --> D

State Management Example

User Service

@Injectable({

providedIn:'root'

})

export class UserService{

private userSubject =

new BehaviorSubject<User|null>(null);

user$ =

this.userSubject.asObservable();

setUser(user:User){

this.userSubject.next(user);

}

clearUser(){

this.userSubject.next(null);

}

}

Component

this.userService

.user$

.subscribe(user=>{

this.user = user;

});

Benefits

  • Shared user state
  • Automatic updates
  • Read-only Observable for consumers

Authentication Example

@Injectable({

providedIn:'root'

})

export class AuthService{

private loggedInSubject =

new BehaviorSubject<boolean>(false);

isLoggedIn$ =

this.loggedInSubject.asObservable();

login(){

this.loggedInSubject.next(true);

}

logout(){

this.loggedInSubject.next(false);

}

}

Navbar

this.authService

.isLoggedIn$

.subscribe(status=>{

this.loggedIn = status;

});

When the user logs in or logs out, every subscribed component receives the updated authentication state automatically.

Authentication Architecture

flowchart TD

Login

Login --> AuthService

AuthService --> BehaviorSubject

BehaviorSubject --> Navbar

BehaviorSubject --> Dashboard

BehaviorSubject --> Profile

Shopping Cart Example

private cartSubject =

new BehaviorSubject<CartItem[]>([]);

cartItems$ =

this.cartSubject.asObservable();

addItem(item: CartItem){

const current =

this.cartSubject.value;

this.cartSubject.next([

...current,

item

]);

}

Benefits

  • Shared cart state
  • Automatic UI updates
  • Centralized business logic

Shopping Cart Architecture

flowchart TD

ProductPage

ProductPage --> CartService

CartService --> BehaviorSubject

BehaviorSubject --> CartComponent

BehaviorSubject --> Checkout

BehaviorSubject --> Header

BehaviorSubject with HTTP Data

@Injectable({

providedIn:'root'

})

export class ProductService{

private productsSubject =

new BehaviorSubject<Product[]>([]);

products$ =

this.productsSubject.asObservable();

loadProducts(){

this.http

.get<Product[]>(this.api)

.subscribe(products=>{

this.productsSubject.next(products);

});

}

}

Once data is loaded, every subscriber receives the latest product list.

Enterprise Banking Example

Online Banking Dashboard

Shared State

  • Logged-in Customer
  • Selected Account
  • Dashboard Preferences
  • Notifications
  • Theme
  • Currency Selection
  • Session Status

Architecture

flowchart TD

AngularApp

AngularApp --> AuthService

AngularApp --> DashboardService

AngularApp --> AccountService

AuthService --> BehaviorSubject

DashboardService --> BehaviorSubject

AccountService --> BehaviorSubject

BehaviorSubject --> Components

Benefits

  • Centralized state
  • Live updates
  • Reduced API calls
  • Better scalability
  • Improved user experience

Performance Best Practices

Practice Benefit
Expose asObservable() Prevent external modifications
Keep BehaviorSubject private Better encapsulation
Emit immutable objects Reliable change detection
Avoid unnecessary emissions Better performance
Use Async Pipe where appropriate Automatic subscription management
Complete finite BehaviorSubjects when appropriate Resource cleanup

Common Mistakes

Exposing BehaviorSubject Directly

Avoid

public userSubject =

new BehaviorSubject<User|null>(null);

Better

private userSubject =

new BehaviorSubject<User|null>(null);

user$ =

this.userSubject.asObservable();

Forgetting the Initial Value

BehaviorSubject requires an initial value.

Correct

new BehaviorSubject<number>(0);

Incorrect

new BehaviorSubject<number>();

Mutating Existing Objects

Avoid

this.userSubject.value.name =

'John';

Prefer immutable updates

this.userSubject.next({

...this.userSubject.value!,

name:'John'

});

Using BehaviorSubject for One-Time Events

BehaviorSubject stores state.

For fire-and-forget events such as button clicks or toast notifications where previous values are not needed, a regular Subject is often a better choice.

Calling next() from Components

Keep update logic inside services instead of allowing multiple components to modify shared state directly.

Best Practices

  • Use BehaviorSubject for shared application state.
  • Keep BehaviorSubjects private.
  • Expose only Observables.
  • Emit immutable data.
  • Avoid unnecessary state duplication.
  • Use meaningful initial values.
  • Keep business logic inside services.
  • Prefer reactive subscriptions over synchronous .value access when possible.
  • Use Async Pipe in templates.
  • Write unit tests for state services.

Advantages

Feature Benefit
Current Value Immediately available
Shared State Centralized data
Multicasting Multiple subscribers
Reactive Updates Automatic UI refresh
Enterprise Ready Scalable architecture

Top 10 Angular BehaviorSubject Interview Questions

1. What is a BehaviorSubject?

Answer

A BehaviorSubject is an RxJS Subject that stores the latest value and immediately emits it to new subscribers.

2. How is BehaviorSubject different from Subject?

Answer

BehaviorSubject requires an initial value and always provides the latest value to new subscribers, whereas a Subject only emits future values.

3. Why does BehaviorSubject require an initial value?

Answer

Because it always maintains a current state that can be delivered immediately to new subscribers.

4. When should you use BehaviorSubject?

Answer

Use it for shared application state such as authentication status, user profiles, themes, shopping carts, or dashboard data.

5. How do you expose a BehaviorSubject safely?

Answer

Keep the BehaviorSubject private and expose a read-only Observable using asObservable().

6. How do you update a BehaviorSubject?

Answer

Use the next() method to emit a new value.

7. How do you access the current value?

Answer

You can use the .value property, although reactive subscriptions are generally preferred for keeping components synchronized.

8. Can multiple components subscribe to the same BehaviorSubject?

Answer

Yes. BehaviorSubject multicasts values so all subscribers receive updates.

9. What are common enterprise use cases?

Answer

  • Authentication state
  • Shopping cart
  • User profile
  • Theme selection
  • Dashboard filters
  • Selected account
  • Language preferences

10. What are BehaviorSubject best practices?

Answer

  • Keep it private.
  • Expose asObservable().
  • Emit immutable objects.
  • Centralize updates in services.
  • Use it only for shared state.

Interview Cheat Sheet

Topic Remember
Initial Value Required
Latest Value Always Available
Multicasting Yes
Shared State Excellent Choice
Update Value next()
Current Value .value
Read-only Stream asObservable()
Best Location Service
Common Use Authentication & State
Best Practice Keep private

Summary

BehaviorSubject is one of the most important state management tools in Angular applications. By storing the latest value and immediately delivering it to new subscribers, it enables consistent state sharing across components. Whether managing authentication, shopping carts, themes, or dashboard data, BehaviorSubject provides a simple yet powerful reactive foundation for enterprise Angular applications.

Key Takeaways

  • ✔ BehaviorSubject stores the latest emitted value.
  • ✔ It requires an initial value.
  • ✔ New subscribers immediately receive the current value.
  • ✔ It is ideal for shared application state.
  • ✔ Keep BehaviorSubjects private.
  • ✔ Expose only asObservable().
  • ✔ Emit immutable state updates.
  • ✔ Centralize update logic inside services.
  • ✔ Prefer reactive subscriptions over direct state access when practical.
  • ✔ BehaviorSubject is one of the most important Angular and RxJS interview topics.

Next Article

➡️ 74-ReplaySubject-QA.md