Discover how Angular 16 and RxJS Observables work together to effectively manage asynchronous data streams. This post explores important ideas, shows how to apply them to Angular 16 projects, and identifies best practices. To assist you in determining when and when to use observables for the requirements of your application, we also go over the benefits and drawbacks of doing so.

Key Concepts and Examples
Creating an Observable
import { Observable } from 'rxjs';
const myObservable = new Observable((observer) => {
  observer.next('First value');
  observer.next('Second value');
  observer.complete();
});
// Subscribing to the Observable
myObservable.subscribe({
  next: (value) => console.log(value),
  complete: () => console.log('Observable completed!'),
});

Using HttpClient with Observables
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
@Component({
  selector: 'app-user-list',
  template: `
    <div *ngFor="let user of users">
      {{ user.name }}
    </div>
  `,
})
export class UserListComponent {
  users: any[] = [];
  constructor(private http: HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe((data) => {
        this.users = data as any[];
      });
  }
}

Chaining Operators
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
of(1, 2, 3, 4, 5)
  .pipe(
    filter((num) => num % 2 === 0), // Only even numbers
    map((num) => num * 10)          // Multiply by 10
  )
  .subscribe((result) => console.log(result)); // Output: 20, 40

Pros of Using RxJS Observables in Angular
1. Reactive Architecture
Example: Handling real-time data streams from WebSocket.

import { webSocket } from 'rxjs/webSocket';
const socket$ = webSocket('wss://example.com/socket');
socket$.subscribe((data) =>
  console.log('Message from server:', data)
);

2. Declarative Code
Example: Combining multiple streams

import { interval, combineLatest } from 'rxjs';
const timer1$ = interval(1000);
const timer2$ = interval(1500);
combineLatest([timer1$, timer2$]).subscribe(([val1, val2]) =>
  console.log(`Timer1: ${val1}, Timer2: ${val2}`)
);

3. Seamless Integration with Angular: Angular’s AsyncPipe automatically handles subscriptions and unsubscriptions.
<div *ngIf="(http.get('https://jsonplaceholder.typicode.com/posts') | async) as posts">
  <ul>
    <li *ngFor="let post of posts">
      {{ post.title }}
    </li>
  </ul>
</div>

Cons of Using RxJS Observables in Angular

1. Steep Learning Curve

• Challenge: Understanding operators like switchMap vs. mergeMap.
• Example of switchMap: Cancels previous HTTP requests when a new one starts.

searchInput.valueChanges
  .pipe(
    switchMap((query) =>
      this.http.get(`/search?q=${query}`)
    )
  )
  .subscribe((results) =>
    console.log(results)
  );

2. Potential Overhead: Always unsubscribe from streams
this.http
  .get('/api/data')
  .toPromise()
  .then((data) => console.log(data));

3. Memory Leaks: Always unsubscribe from streams

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';
@Component({
  selector: 'app-example',
  template: '',
})
export class ExampleComponent implements OnDestroy {
  private subscription: Subscription;
  constructor() {
    this.subscription = interval(1000).subscribe(console.log);
  }
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}