Observables in Angular: what they are, why RxJS matters, and how to use them correctly (async pipe, cancellation, operators)Frontend interview answer

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { AsyncPipe, NgFor } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { catchError, map, of, shareReplay } from 'rxjs';

type User = { id: number; name: string };

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [NgFor, AsyncPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <ul>
      <li *ngFor="let u of (users$ | async)">{{ u.name }}</li>
    </ul>
  `
})
export class UsersComponent {
  private http = inject(HttpClient);

  // Cold source (HTTP) -> shared + cached for this component instance
  readonly users$ = this.http.get<User[]>('/api/users').pipe(
    catchError(() => of([] as User[])),
    shareReplay({ bufferSize: 1, refCount: true })
  );
}
                  

import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { AsyncPipe, NgFor } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { catchError, debounceTime, distinctUntilChanged, filter, map, of, startWith, switchMap } from 'rxjs';

type User = { id: number; name: string };

@Component({
  selector: 'app-user-search',
  standalone: true,
  imports: [ReactiveFormsModule, NgFor, AsyncPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <input [formControl]="q" placeholder="Search users" />

    <ul>
      <li *ngFor="let u of (results$ | async)">{{ u.name }}</li>
    </ul>
  `
})
export class UserSearchComponent {
  private http = inject(HttpClient);
  readonly q = new FormControl('', { nonNullable: true });

  readonly results$ = this.q.valueChanges.pipe(
    startWith(this.q.value),
    debounceTime(250),
    map(v => v.trim()),
    filter(v => v.length >= 2),
    distinctUntilChanged(),
    switchMap(v =>
      this.http.get<User[]>(`/api/users?q=${encodeURIComponent(v)}`).pipe(
        catchError(() => of([] as User[]))
      )
    )
  );
}
                  

import { Injectable, inject } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, map, shareReplay } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RouteInfoService {
  private router = inject(Router);

  readonly currentUrl$ = this.router.events.pipe(
    filter((event): event is NavigationEnd => event instanceof NavigationEnd),
    map(event => event.urlAfterRedirects),
    shareReplay({ bufferSize: 1, refCount: true })
  );
}
                  

import { Component, DestroyRef, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { fromEvent, map } from 'rxjs';

@Component({
  selector: 'app-resize-log',
  standalone: true,
  template: `Resize listener active (check console)`
})
export class ResizeLogComponent {
  private destroyRef = inject(DestroyRef);

  constructor() {
    fromEvent(window, 'resize').pipe(
      map(() => window.innerWidth),
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(w => console.log('width', w));
  }
}
                  

// ❌ UI data via manual subscribe: extra teardown + duplicated component state
ngOnInit() {
  this.http.get<User[]>('/api/users')
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe(users => {
      this.users = users;
    });
}

// ✅ UI data as a stream: template owns subscription lifetime
readonly users$ = this.http.get<User[]>('/api/users').pipe(
  shareReplay({ bufferSize: 1, refCount: true })
);