The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes.
Let’s take a time observable which continuously updates the view for every 2 seconds with the current time.
@Component({ selector: ‘async-observable-pipe’, template: <div><code>observable|async</code>:Time: {{ time | async }}</div>})export class AsyncObservablePipeComponent { time = new Observable(observer => setInterval(() => observer.next(new Date().toString()), 2000) );}
<div><code>observable|async</code>:Time: {{ time | async }}</div>
The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.
Hi Tushar ,
Please refer my article for your interview question.Hope it might help you.
https://www.c-sharpcorner.com/article/how-to-use-trackby-in-angular-8/
Thankyou
When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks. We can use the async pipe in Angular application by including the CommonModule which exports all the basic Angular directives and pipes, such as NgIf, NgForOf, DecimalPipe, and so on. These are then re-exported by BrowserModule, which is included automatically in the root AppModule, when you create a new app with the CLI new command
The async pipe in angular will subscribe to an Observable or Promise
Syntax of AsyncPipeThe below syntax shows how we can use the async pipe with the object expression.
{{obj_expression | async}}
Using AsyncPipe with PromisesAsync pipe for promises automatically adds a then callback and renders the response. Now let’s see an example where we are binding a Promise to the view. Clicking the Resolve button resolves the promise.
@Component({ selector: ‘async -pipe’, template: <div><code>promise|async</code>:<button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button><span>Wait for it... {{ logMessage | async }}</span></div>})export class AsyncPipeComponent { logMessage: Promise|null = null; arrived: boolean = false;
<div><code>promise|async</code>:<button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button><span>Wait for it... {{ logMessage | async }}</span></div>
private resolve: Function|null = null;
constructor() { this.reset(); }
reset() { this.arrived = false; this.logMessage = new Promise((resolve, reject) => { this.resolve = resolve; }); }
clicked() { if (this.arrived) { this.reset(); } else { this.resolve !(‘hi there!’); this.arrived = true; } }}typescriptIn the above example, we pipe the output of our promise to the async pipe. The property promise is the actual unresolved promise that gets returned from logMessage without then being called on it.