BehaviorSubject as simple store in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular component using BehaviorSubject?

Consider this Angular component that uses a BehaviorSubject as a simple store. What will be displayed in the template after the button is clicked once?

Angular

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count$ | async }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class CounterComponent {
  private countSubject = new BehaviorSubject<number>(0);
  count$ = this.countSubject.asObservable();

  increment() {
    const current = this.countSubject.value;
    this.countSubject.next(current + 1);
  }
}

A Count: NaN

B Count: 1

C Count: undefined

D Count: 0

💡 Hint

Remember that BehaviorSubject holds the current value and emits it to subscribers immediately.

The BehaviorSubject starts with 0. When the button is clicked, increment() adds 1 and emits the new value. The template shows the updated count.

❓ state_output

intermediate

What is the value of the BehaviorSubject after these operations?

Given this code snippet, what is the final value emitted by store$?

Angular

import { BehaviorSubject } from 'rxjs';

const store = new BehaviorSubject({ count: 0 });

store.next({ count: store.value.count + 1 });
store.next({ count: store.value.count + 2 });

const store$ = store.asObservable();

A {"count": 3}

B {"count": 0}

C {"count": 2}

D {"count": 1}

💡 Hint

Each next uses the current value at that moment.

First next adds 1 to 0 → 1. Second next adds 2 to 1 → 3. Final value is { count: 3 }.

📝 Syntax

advanced

Which option correctly creates a BehaviorSubject with initial value and exposes it as observable?

Choose the correct code snippet that creates a BehaviorSubject with initial value 10 and exposes it as a read-only observable named value$.

A

private valueSubject = BehaviorSubject(10);
public value$ = valueSubject.asObservable();

B

public valueSubject = new BehaviorSubject(10);
private value$ = this.valueSubject.asObservable();

C

private valueSubject = new BehaviorSubject<number>(10);
public value$ = this.valueSubject.asObservable();

D

const valueSubject = new BehaviorSubject<number>;
const value$ = valueSubject.asObservable();

💡 Hint

Remember to use new keyword and specify initial value in constructor.

Option C correctly uses new BehaviorSubject(10) and exposes value$ as observable. Others have syntax errors or wrong access modifiers.

🔧 Debug

advanced

Why does this BehaviorSubject-based store not update the component view?

In this Angular component, the template does not update when updateName is called. What is the cause?

Angular

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

@Component({
  selector: 'app-name',
  template: `
    <p>Name: {{ name$ | async }}</p>
    <button (click)="updateName('Alice')">Set Alice</button>
  `
})
export class NameComponent {
  private nameSubject = new BehaviorSubject<string>('Bob');
  name$ = this.nameSubject.asObservable();

  updateName(newName: string) {
    this.nameSubject.next(newName);
  }
}

A Directly assigning to nameSubject.value does not emit a new value; use next() instead.

B The template is missing the async pipe, so it does not update.

C BehaviorSubject cannot hold string values; it only supports numbers.

D The component selector is incorrect, so the component is not rendered.

💡 Hint

Check how to properly update a BehaviorSubject's value.

You must call next() to emit a new value. Assigning to value property does not trigger emission.

🧠 Conceptual

expert

What is the main advantage of using BehaviorSubject as a simple store in Angular?

Choose the best explanation for why BehaviorSubject is often used as a simple store in Angular applications.

A It enforces immutability of the state, preventing accidental changes.

B It automatically persists state to local storage without extra code.

C It delays emissions until all subscribers are ready, ensuring synchronized updates.

D It holds the current state and immediately emits the latest value to new subscribers, enabling reactive UI updates.

💡 Hint

Think about how BehaviorSubject differs from a regular Subject.

BehaviorSubject keeps the latest value and emits it immediately to new subscribers, which is useful for state management and UI updates.