Angular · Theory

Observables Basics

Theory

20/43

Observables Basics

An Observable is a stream: values over time. HTTP returns one. A search box can emit many. You subscribe, or use async pipe in the template.

Board: type in search. debounceTime(300), switchMap to HTTP. Old request cancelled. Trap: nested subscribe inside subscribe — flatten with switchMap. Another trap: forgetting complete/unsubscribe on a long-lived stream.

Exam tip

Observable vs promise. debounce + switchMap search.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Observables Basics: toggle open. Say whether the panel is on screen after one click.

Short notes

DefStream of values. HTTP or UI events.
RuleswitchMap for search. async pipe when you can.
TrapNested subscribe / leak.

Angular · Theory

Observables Basics

← All stacks

Theory

20/43

Observables Basics

An Observable is a stream: values over time. HTTP returns one. A search box can emit many. You subscribe, or use async pipe in the template.

Exam tip

Observable vs promise. debounce + switchMap search.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Observables Basics: toggle open. Say whether the panel is on screen after one click.

Short notes

DefStream of values. HTTP or UI events.
RuleswitchMap for search. async pipe when you can.
TrapNested subscribe / leak.

Observables Basics

Example

Short notes

Questions

Observables Basics

Example

Short notes

Questions