RxJS & Calling API

RxJS Operators & Subjects: Managing Subscriptions and Async Data

Learning Outcome

Understand Subject and BehaviorSubject

Use Async Pipe in Angular templates

Manage subscriptions and avoid memory leaks

Learn commonly used operators

Understand RxJS Operators and their usage

Analogy

Imagine a water pipeline system.

Water flows continuously and Filters can be added to clean or modify water

Analogy

Similarly in RxJS:

Operators transform data

Subscriptions control data flow

Why Operators & Subscription Management Matter

Data comes from APIs, events, and streams

Observables can emit multiple values over time

Why Operators & Subscription Management Matter

RxJS solves this using:

Overview of Operators

Operators are functions used to transform, filter, or modify data streams.

observable$
 .pipe(
 // operators here
 )
 .subscribe();

Operators make data handling clean and powerful.

Key Concepts of Operators

Operators work on observable streams.

Operators

Transform data

Filter values

Combine streams

Handle errors

Commonly Used Operators

map → transform data

filter → filter values

tap → side effects

switchMap → handle API calls

import { map } from 'rxjs';
of(1, 2, 3)
.pipe(
  map(x => x * 2)
)
.subscribe(console.log);

Importance of Managing Subscriptions

Subscriptions must be handled properly.

Angular apps can slow down if subscriptions are not cleaned up.

Methods to Unsubscribe

1. Manual Unsubscribe

subscription.unsubscribe();

2. ngOnDestroy Lifecycle

ngOnDestroy() {
 this.subscription.unsubscribe();
}

3. takeUntil Operator

Used for automatic cleanup.

<p>{{ data$ | async }}</p>

4. Async Pipe

Async Pipe automatically subscribes and unsubscribes.

Subject in RxJS

Observable

Observer

A Subject is both:

It allows multiple subscribers.

import { Subject } from 'rxjs';
const subject = new Subject();
subject.subscribe(data => console.log("A:", data));
subject.subscribe(data => console.log("B:", data));
subject.next("Hello");

BehaviorSubject

BehaviorSubject stores the latest value.

New subscribers always get the last emitted value.

import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject("Initial");
subject.subscribe(data => console.log(data));

Subject vs Observable

Summary

BehaviorSubject keeps the latest emitted value

Subjects allow multi-casting of data

Async pipe simplifies subscription management

Subscriptions must be handled to avoid memory leaks

Operators help transform and manage observable data

Quiz

What happens if subscriptions are not unsubscribed?

A. Faster app

B. Memory leaks

C. Better performance

D. No effect

Quiz-Answer

What happens if subscriptions are not unsubscribed?

A. Faster app

B. Memory leaks

C. Better performance

D. No effect