Unwrapping data from an observable

Observables let you pass messages between parts of your application. You can use observables for event handling, asynchronous programming, and handling multiple values. Observables can deliver single or multiple values of any type, either synchronously (as a function delivers a value to its caller) or asynchronously on a schedule.

Use the built-in AsyncPipe to accept an observable as input and subscribe to the input automatically. Without this pipe, your component code would have to subscribe to the observable to consume its values, extract the resolved values, expose them for binding, and unsubscribe when the observable is destroyed in order to prevent memory leaks. AsyncPipe is a pipe that saves boilerplate code in your component to maintain the subscription and keep delivering values from that observable as they arrive.

The following code example binds an observable of message strings (message$) to a view with the async pipe.

src/app/hero-async-message.component.ts

      import {Component} from '@angular/core';
import {AsyncPipe} from '@angular/common';
import {Observable, interval} from 'rxjs';
import {map, startWith, take} from 'rxjs/operators';
@Component({
  standalone: true,
  selector: 'app-hero-async-message',
  template: `
    <h2>Async Messages and AsyncPipe</h2>
    <p>{{ message$ | async }}</p>
    <button type="button" (click)="resend()">Resend Messages</button>`,
  imports: [AsyncPipe],
})
export class HeroAsyncMessageComponent {
  message$: Observable<string>;
  private messages = ['You are my hero!', 'You are the best hero!', 'Will you be my hero?'];
  constructor() {
    this.message$ = this.getResendObservable();
  }
  resend() {
    this.message$ = this.getResendObservable();
  }
  private getResendObservable() {
    return interval(1000).pipe(
      map((i) => `Message #${i + 1}: ${this.messages[i]}`),
      take(this.messages.length),
      startWith('Waiting for messages...'),
    );
  }
}