Observables

Angular’s async pipe subscribes to an Observable or Promise when the component loads and returns the last emitted value. The async pipe identifies the component that needs to be checked for changes whenever a new value is emitted. It will automatically unsubscribe when the component gets destroyed. Also, when the reference of an expression changes, the async pipe automatically unsubscribes from the current Observable or Promise and subscribes to a new one.

An example of an Async pipe with Observables

We have a simple component that uses the async pipe to subscribe to the currentTime$ observable. The displayed value is automatically updated whenever the observable emits a new value.

import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <h1>Async Pipe Example</h1>
    <p>Current time: {{ currentTime$ | async }}</p>
  `
})
export class AppComponent {
  currentTime$: Observable<Date>;

  constructor() {
    this.currentTime$ = interval(1000).pipe(
      map(() => new Date())
    );
  }
}

When to use ngIf with Async Pipe?

The ngIf directive and async pipe can be used in situations where you want to conditionally display content based on the completion of an asynchronous operation or the presence of data from an asynchronous source.

Here are a few common scenarios where you might use ngIf with async pipe

  1. Data Loading: When fetching data from an API or performing an asynchronous operation, ngIf with async pipe can be used to display a loading message or spinner until the data is loaded and ready to be displayed.
  2. Authentication and Authorization: When implementing authentication and authorization in an application, ngIf with async pipe can conditionally show or hide some UI elements based on the user’s permissions and access rights.
  3. Conditional Rendering: If you have a conditional logic in your template that depends on the result of an asynchronous operation, ngIf with async pipe is used to conditionally render different sections of a template based on the state of the asynchronous operation.

Example of ngIf and Async Pipe

Here, we have an AppComponent that declares an Observables called data$. The data$ observable simulates an asynchronous data retrieval using the of operator and delay operator from RxJS.

import { Component } from '@angular/core'; 
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';
>
@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="data$ | async as data; else loading">
      <h1>Data is loaded:</h1>
      <p>{{ data }}</p>
    </div>

    <ng-template #loading>
      <h1>Loading data...</h1>
    </ng-template>
  `,
})
export class AppComponent {
  data$: Observable<string>;

  constructor() {
    // Simulating an asynchronous data retrieval
    this.data$ = of('Hello, world!').pipe(delay(2000));
  }
}

You can simplify your code and let Angular handle subscription management and automatic updates of the view when the asynchronous operation completes or emits new values by using ngIfwith asyncpipe. Overall, ngIf with async pipe allows you to write cleaner and concise code for handling asynchronous operations and conditional rendering in Angular apps.