Subject types (Subject, BehaviorSubject, ReplaySubject) in Angular - Mini Project: Build & Apply

Using Subject Types in Angular: Subject, BehaviorSubject, ReplaySubject

📖 Scenario: You are building a simple Angular app that shares messages between components using different types of Subjects.This helps you understand how Subject, BehaviorSubject, and ReplaySubject work differently in real apps.

🎯 Goal: Create an Angular standalone component that sets up three different Subjects: Subject, BehaviorSubject, and ReplaySubject.Send messages through each and subscribe to show how they behave differently.

📋 What You'll Learn

Create a Subject called simpleSubject.

Create a BehaviorSubject called behaviorSubject with initial value 'Initial'.

Create a ReplaySubject called replaySubject with buffer size 2.

Subscribe to each subject and store the latest message in separate variables.

Send at least two messages to each subject.

Display the latest messages from each subject in the component template.

💡 Why This Matters

🌍 Real World

Sharing data reactively between components in Angular apps, such as user input, notifications, or live updates.

💼 Career

Understanding Subjects is essential for Angular developers to manage asynchronous data streams and component communication effectively.

1

Set up Subjects in the component

In the Angular component class, import Subject, BehaviorSubject, and ReplaySubject from rxjs. Then create three properties: simpleSubject as a new Subject<string>(), behaviorSubject as a new BehaviorSubject<string>('Initial'), and replaySubject as a new ReplaySubject<string>(2).

Angular

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

@Component({
  selector: 'app-subject-demo',
  standalone: true,
  template: ``,
})
export class SubjectDemoComponent {
  // Create simpleSubject, behaviorSubject, and replaySubject here
}

Need a hint?

Remember to import Subject, BehaviorSubject, and ReplaySubject from rxjs and create each as a class property.

2

Add variables to hold latest messages

Add three string properties to the component class: simpleMessage, behaviorMessage, and replayMessage. Initialize each with an empty string ''.

Angular

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

@Component({
  selector: 'app-subject-demo',
  standalone: true,
  template: ``,
})
export class SubjectDemoComponent {
  simpleSubject = new Subject();
  behaviorSubject = new BehaviorSubject('Initial');
  replaySubject = new ReplaySubject(2);

  // Add simpleMessage, behaviorMessage, replayMessage variables here
}

Need a hint?

These variables will store the latest message received from each subject.

3

Subscribe to subjects and send messages

In the component constructor, subscribe to simpleSubject, behaviorSubject, and replaySubject. For each subscription, update the corresponding message variable (simpleMessage, behaviorMessage, replayMessage) with the received value. Then send two messages to each subject: 'First' and 'Second'.

Angular

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

@Component({
  selector: 'app-subject-demo',
  standalone: true,
  template: ``,
})
export class SubjectDemoComponent {
  simpleSubject = new Subject();
  behaviorSubject = new BehaviorSubject('Initial');
  replaySubject = new ReplaySubject(2);

  simpleMessage = '';
  behaviorMessage = '';
  replayMessage = '';

  constructor() {
    // Subscribe to subjects and send messages here
  }
}

Need a hint?

Subscribe to each subject and update the message variables inside the subscription callback. Then send two messages to each subject using next().

4

Display latest messages in the template

In the component template, add three paragraphs showing the latest messages from each subject. Use interpolation to display simpleMessage, behaviorMessage, and replayMessage with labels: Simple Subject:, Behavior Subject:, and Replay Subject: respectively.

Angular

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

@Component({
  selector: 'app-subject-demo',
  standalone: true,
  template: `
    
  `,
})
export class SubjectDemoComponent {
  simpleSubject = new Subject();
  behaviorSubject = new BehaviorSubject('Initial');
  replaySubject = new ReplaySubject(2);

  simpleMessage = '';
  behaviorMessage = '';
  replayMessage = '';

  constructor() {
    this.simpleSubject.subscribe(value => this.simpleMessage = value);
    this.behaviorSubject.subscribe(value => this.behaviorMessage = value);
    this.replaySubject.subscribe(value => this.replayMessage = value);

    this.simpleSubject.next('First');
    this.simpleSubject.next('Second');

    this.behaviorSubject.next('First');
    this.behaviorSubject.next('Second');

    this.replaySubject.next('First');
    this.replaySubject.next('Second');
  }
}

Need a hint?

Use interpolation {{ variable }} inside paragraph tags to show each message with a label.