What is the purpose of Async pipe?

Tushar Bharambe

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)
);
}

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.

Vinay Singh

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

Siddharth Gajbhiye

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 AsyncPipe
The below syntax shows how we can use the async pipe with the object expression.

Using AsyncPipe with Promises
Async 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;

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;
}
}
}
typescript
In 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.

Laxmidhar Sahoo