Observables in Angular

-

🚀 Observables in Angular – Complete Beginner’s Guide (with Examples)

📘 Introduction

In Angular, Observables are a core mechanism for handling asynchronous data streams. Built on top of the RxJS library, they help you react to changes over time—ideal for things like HTTP calls, form inputs, and real-time data updates.



📚 Table of Contents

✨ Key Features of Observables

  • ✅ Emit multiple values over time
  • ⏱ Lazy execution – runs only when subscribe() is called
  • 🚫 Cancelable using unsubscribe()
  • 🔧 Works with RxJS operators like map, filter, debounceTime
  • 📦 Used in Angular’s core: HttpClient, Router, Forms
  • 🧠 Handles next, error, and complete

🔁 Observable Lifecycle

+----------+ +-----------+ +-------------+ | next() | --> | error() | --> | complete() | +----------+ +-----------+ +-------------+

🧩 Observable Callbacks

  • next(value): Triggered when a value is emitted
  • error(err): Triggered when an error occurs (e.g. 404 error)
  • complete(): Triggered when the stream finishes

⚙️ RxJS Operator Chaining Example

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

of(1, 2, 3, 4).pipe(
  filter(x => x % 2 === 0),
  map(x => x * 10)
).subscribe(value => console.log(value));

Output: 20, 40

Tip: Operator chaining with pipe() makes complex logic easier to manage and test.

📊 Stream Lifecycle Table

Method When Called Ends Stream? Example Use Case
next() Value emitted ❌ User input, HTTP response
error() Error occurs ✅ Network failure
complete() Stream ends cleanly ✅ File upload finished

✅ Best Practices

  • 🔁 Always unsubscribe manually or use takeUntil()
  • 💡 Use the Angular async pipe for auto-subscription
  • 🧱 Avoid nested subscriptions; use switchMap or mergeMap

💻 Basic Example

import { Observable } from 'rxjs';

const obs = new Observable(observer => {
  observer.next("First value");
  setTimeout(() => observer.next("Second value"), 1000);
  setTimeout(() => observer.complete(), 2000);
});

obs.subscribe({
  next: val => console.log(val),
  complete: () => console.log("Completed")
});

Output: First value → Second value → Completed

🧪 Extended Example with Error & Unsubscribe

import { Observable, Subscription } from 'rxjs';

const obs = new Observable(observer => {
  observer.next("First value");
  const t1 = setTimeout(() => observer.next("Second value"), 1000);
  const t2 = setTimeout(() => observer.complete(), 2000);

  return () => {
    clearTimeout(t1);
    clearTimeout(t2);
    console.log("Unsubscribed");
  };
});

const subscription = obs.subscribe({
  next: val => console.log("Next:", val),
  error: err => console.error("Error:", err),
  complete: () => console.log("Stream completed")
});

setTimeout(() => subscription.unsubscribe(), 1500);

📦 Angular Service and Component Example

// data.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  getData(): Observable<string> {
    return new Observable(observer => {
      observer.next("First value");
      const t1 = setTimeout(() => observer.next("Second value"), 1000);
      const t2 = setTimeout(() => observer.complete(), 2000);

      return () => {
        clearTimeout(t1);
        clearTimeout(t2);
        console.log("Cleaned up");
      };
    });
  }
}
// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: '<p>Check console for output</p>'
})
export class AppComponent implements OnInit, OnDestroy {
  private subscription!: Subscription;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.subscription = this.dataService.getData().subscribe({
      next: val => console.log("Received:", val),
      error: err => console.error("Error:", err),
      complete: () => console.log("Stream completed")
    });

    setTimeout(() => {
      this.subscription.unsubscribe();
    }, 1500);
  }

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

🎯 Why Use Observables?

Observables bring power and flexibility to async programming. Combined with RxJS, they simplify handling events, HTTP calls, and time-based workflows in Angular.

🔗 Resources

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