Tushar Bharambe
What is the purpose of Async pipe?

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

By Tushar Bharambe in Angular on Jan 07 2020
  • Vinay Singh
    Apr, 2020 1

    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.

    • 0
  • Siddharth Gajbhiye
    Mar, 2020 21

    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

    • 0
  • Laxmidhar Sahoo
    Jan, 2020 9

    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.

    {{obj_expression | async}}

    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.

    • 0

Most Popular Job Functions


MOST LIKED QUESTIONS