Mastering RxJS Operators in Angular

-
Mastering RxJS Operators in Angular

📘 Mastering RxJS Operators in Angular

RxJS operators are powerful functions that help manipulate, transform, filter, and combine observable streams. They allow developers to handle asynchronous data efficiently in Angular applications. In this guide, we explore the most useful operators with categorized examples.

1️⃣ Transformation Operators

1.1 map()

Transforms each emitted value using a function.

of(1, 2, 3).pipe(map(value => value * 2)).subscribe(console.log); // 2, 4, 6

1.2 switchMap()

Cancels previous emissions and switches to a new observable.

fromEvent(document, 'click')
  .pipe(switchMap(() => interval(1000)))
  .subscribe(console.log);

1.3 mergeMap()

Maps and merges multiple inner observables.

of('A', 'B').pipe(
  mergeMap(value => of(`${value}1`, `${value}2`))
).subscribe(console.log);

1.4 concatMap()

Processes observables in sequence, preserving order.

of('X', 'Y', 'Z')
  .pipe(concatMap(value => of(value).pipe(delay(1000))))
  .subscribe(console.log);

1.5 exhaustMap()

Ignores new emissions while processing the current observable.

fromEvent(document, 'click')
  .pipe(exhaustMap(() => interval(1000)))
  .subscribe(console.log);

2️⃣ Filtering Operators

2.1 filter()

of(1, 2, 3, 4, 5)
  .pipe(filter(value => value % 2 === 0))
  .subscribe(console.log); // 2, 4

2.2 debounceTime()

fromEvent(document, 'keyup')
  .pipe(debounceTime(300), map(event => (event.target as HTMLInputElement).value))
  .subscribe(console.log);

2.3 distinctUntilChanged()

of(1, 1, 2, 2, 3, 1)
  .pipe(distinctUntilChanged())
  .subscribe(console.log);

2.4 take()

interval(1000)
  .pipe(take(3))
  .subscribe(console.log);

2.5 skip()

of(1, 2, 3, 4)
  .pipe(skip(2))
  .subscribe(console.log);

3️⃣ Combination Operators

3.1 merge()

merge(of(1, 2), of(3, 4))
  .subscribe(console.log);

3.2 concat()

concat(of('A', 'B'), of('C', 'D'))
  .subscribe(console.log);

3.3 forkJoin()

forkJoin([of('Data1'), of('Data2')])
  .subscribe(console.log);

3.4 combineLatest()

combineLatest([of(1, 2, 3), of('A', 'B', 'C')])
  .subscribe(console.log);

3.5 withLatestFrom()

interval(1000)
  .pipe(withLatestFrom(interval(500)))
  .subscribe(console.log);

4️⃣ Error Handling Operators

4.1 catchError()

throwError('Error occurred')
  .pipe(catchError(err => of('Fallback Value')))
  .subscribe(console.log);

4.2 retry()

throwError('Error')
  .pipe(retry(3))
  .subscribe(console.log);

4.3 retryWhen()

throwError('Network error')
  .pipe(retryWhen(() => timer(2000)))
  .subscribe(console.log);

5️⃣ Utility Operators

5.1 tap()

of(1, 2, 3)
  .pipe(tap(value => console.log('Before:', value)))
  .subscribe(console.log);

5.2 delay()

of('Delayed Value')
  .pipe(delay(2000))
  .subscribe(console.log);

5.3 timeout()

of('Value')
  .pipe(timeout(1000))
  .subscribe(console.log);

📌 Conclusion

RxJS operators form the backbone of reactive programming in Angular. Mastering them allows you to build cleaner, more powerful data flows and handle complex async tasks with ease. Bookmark this guide and practice by building small reactive features in your apps.

Comments

Post a Comment

Popular posts from this blog

Debouncing & Throttling in RxJS: Optimizing API Calls and User Interactions

-
RxJS Debounce vs Throttle in Angular – Best Practices & Examples What is RxJS — quick primer RxJS (Reactive Extensions for JavaScript) provides Observables and operators to model and manipulate streams of asynchronous events — from keystrokes and HTTP requests to timers and WebSocket messages. 💡 Why this matters: Operators like debounceTime and throttleTime help you control event frequency, reducing wasted CPU and network work while improving UX. 1. Debouncing — emit after silence Debouncing delays emitting a value until a specified period of inactivity. It's best for typeahead inputs where only the final value after the user stops typing is relevant. Live search example (production-ready) // search.component.ts import { Component, OnDestroy } from '@angular/core'; import { FormControl } from '@angular/forms'; import { Subject } from 'rxjs'; import { debounc...
Read more

Promises in Angular

-
🚀 Promises in Angular – The Complete Beginner’s Guide (with Examples) 📘 Introduction In modern Angular development, handling asynchronous operations is essential. Whether you're fetching data from an API, loading files, or wrapping browser-native APIs, Promises offer a clean and readable way to deal with one-time asynchronous operations. This guide explains: What Promises are How they compare with Observables Real-world examples using .then() and async/await When to use Promises vs Observables in Angular 📚 Table of Contents 🔍 What is a Promise? 🔁 Promise Lifecycle ✨ Key Features 📌 Syntax 💻 Example 1: Fetch 💻 Example 2: setTimeout 📊 Promises vs Observables 🎯 When to Use Promises 📦 Angular Service Example 🔄 Observable vs Promise ❓ FAQ ✅ Summary 🔍 What is a Promise? A Promise is a JavaScript object that represents the eventual success (fulfilled) or failure (rejected) of an asynchronous operation. 📌 Com...
Read more

Comprehensive Guide to C# and .NET Core OOP Concepts and Language Features

-
Comprehensive Guide to C# and .NET Core OOP Concepts Class A class is a blueprint for creating objects that encapsulate both data and behavior. Access Modifiers : public, internal, abstract, sealed control visibility and inheritance. Static Classes : Cannot be instantiated, contain only static members. Partial Classes : Split across files using partial keyword for better organization. public class Car { public string Model; public void Drive() => Console.WriteLine($"{Model} is driving."); } Analogy: A car blueprint used to build many actual cars. Benefits: Reusability, Encapsulation, Abstraction, Inheritance Object An object is an instance of a class. Managed by Garbage Collector for automatic memory cleanup. Boxing/Unboxing allows value types to be treated a...
Read more