![\"How](\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/how-to-use-async-pipe-angular.png\")
<\/figure>\n\n\n\nWhat is an Async Pipe?<\/h2>\n\n\n\n
An Async Pipe is a built-in Angular feature that allows you to subscribe and automatically unsubscribe from objects. When subscribed to an Observable or Promise, the Async Pipe creates a copy of the latest emitted output, modifies its format, and displays the resulting value directly in the view. The Async Pipe uses a straightforward syntax:<\/p>\n\n\n\n
{{ obj_expression | async }}<\/strong><\/p>\n\n\n\n You can also use Async Pipes to avoid unnecessary Angular change detection runs and apply checks only to Observables that receive new values.<\/p>\n\n\n\n By default, Angular runs change detection on all components before updating the DOM. This process can potentially drain system resources and negatively affect your app.<\/p>\n\n\n\n Using Async Pipes with the OnPush change detection strategy can improve web application performance. By setting the ChangeDetector<\/strong> class to The OnPush mode uses the Async Pipe to inform Angular that the component only tracks value changes originating from its parent. Angular does not need to check the component if there were no changes registered in the parent component.<\/p>\n\n\n\n Additionally, an Async Pipe streamlines Angular\u2019s change detection process by subscribing and automatically unsubscribing from a component precisely at the end of its life cycle. You no longer need to unsubscribe from an Observable or Promise manually. Async Pipes guarantee that redundant subscriptions do not remain open after the component is destroyed and result in a potential memory leak.<\/p>\n\n\n\n You can subscribe to an Observable object to track changes and pass functions that execute on specific events. An Async Pipe automates this process by consuming the values from the observable data stream and exposing the resolved values for binding.<\/p>\n\n\n\n In this example, an Async Pipe is used with the *ngFor<\/strong> directive to resolve an observable to an array type.<\/p>\n\n\n\n <\/p>\n\n\n\n The Async Pipe maintains the subscription to the Observable and continues to deliver values in real-time.<\/p>\n\n\n\n Once the observed component is destroyed, the Async Pipe categorically unsubscribes from the Observable.<\/p>\n\n\n\n You can use the Promise function to resolve a value asynchronously. Promises are limited to a one call cycle, either a resolve<\/em><\/strong> call with a single fulfillment value or a reject<\/em><\/strong> call with a single error message.<\/p>\n\n\n\n We need to evaluate the resulting value asynchronously and display it directly. You can use the result to call an API that:<\/p>\n\n\n\nWhen to Use Async Pipes?<\/h2>\n\n\n\n
<strong>OnPush<\/strong><\/code>, only an Observable that registers a new value needs to go through the change detection process.<\/p>\n\n\n\n![\"Default](\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/default-angular-detection-mode-vs-onpush-angular-detection-mode.png\")
<\/figure>\n\n\n\nUsing Async Pipes with Observables<\/h3>\n\n\n\n
import {Component} from '@angular\/core';\nimport {Observable, of} from 'rxjs';\n\n@Component({\n selector: 'async-observable-pipe',\n template: `<ul><li *ngFor="let d of uList | async">{{d}}<\/li><\/ul>`\n\n})\nexport class AppComponent {\n\n uList: Observable<number[]>;\n\n constructor() {\n this.uList = this.getData();\n }\n\n getData(): Observable<number[]> {\n return of([1,2,3,4,5,6,7,8]);\n }\n}\n<\/code><\/pre>\n\n\n\n![\"Angular](\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2020\/10\/Angular-async-pipe-example.png\")
<\/figure>\n\n\n\nUsing Async Pipes with Promises<\/h3>\n\n\n\n