angular-pipe-async

Introduction

Angular has a built-in pipe async that can be used to subscribe to an Observable or Promise and return the latest value it has emitted.

Without async pipe

Let’s see how we write the code without using the async pipe. In the following OrderComponent, we have a todo object that is fetched from the DataService using the fetchTodoById method which returns an Promise. We call the fetchTodos method in the ngOnInit lifecycle hook and assign the result to the todo property.

export class OrderComponent implements OnInit {
  todo: Todo | null = null;

  constructor(private dataService: DataService) {
  }

  fetchTodos() {
    return this.dataService.fetchTodoById(1);
  }

  ngOnInit() {
    this.fetchTodos().then(todo => {
      this.todo = todo
    })
  }
}

<div>
  <div>id: {{todo?.id}}</div>
  <div>userId: {{todo?.userId}}</div>
  <div>title: {{todo?.title}}</div>
  <div>completed: {{todo?.completed}}</div>
</div>

With async pipe

With async pipe, we don’t need to call then method on Promise, the async pipe will take care of it. We can directly assign the result of fetchTodos method to the todo property and use the async pipe in the template to subscribe to the Promise.

We need two changes in the code:

1. Change the type of todo property to Promise<Todo> | null.
2. Assign the result of fetchTodos method to the todo property.

export class OrderComponent implements OnInit {
  todo: Promise<Todo> | null = null; // <--- 1

  constructor(private dataService: DataService) {
  }

  fetchTodos() {
    return this.dataService.fetchTodoById(1);
  }

  ngOnInit() {
    this.todo = this.fetchTodos(); // <--- 2
  }
}

Note that we use the as syntax to assign the result of the async pipe to a template variable todo.

<div *ngIf="todo | async as todo">
  <div>id: {{todo.id}}</div>
  <div>userId: {{todo.userId}}</div>
  <div>title: {{todo.title}}</div>
  <div>completed: {{todo.completed}}</div>
</div>

Using with Observables

If using with Observable, just change the type of todo property to Observable<Todo> | null.

todo: Observable<Todo> | null = null; // If using Observable

Using with ngFor

<div *ngFor="let todo of todos | async">
  <div>id: {{todo.id}}</div>
  <div>userId: {{todo.userId}}</div>
  <div>title: {{todo.title}}</div>
  <div>completed: {{todo.completed}}</div>
</div>

Benefits

1. When use with Observables, the async pipe automatically subscribes to the Observable, renders the output within the template, and then unsubscribes when the component is destroyed. - You don’t need to manually subscribe and unsubscribe.
2. Works with Promises as well.

References

https://angular.dev/api/common/AsyncPipe?tab=usage-notes