DEV Community

loading...

TIL: How to use async | pipe in Angular

prayatna profile image Prayatna Bhattarai Updated on ・1 min read

I have a service that calls the api and gets some data to use it on my MessagePreview component.

message-preview.component.ts

import { Component } from '@angular/core';
//other imports

@Component({
  selector: 'message-preview',
  templateUrl: './message-preview.component.html',
})
export class MessagePreviewComponent  {
  previews$;
  latestValue:PreviewResponse[];
  constructor(private previewService: PreviewService){}

  ngOnInit(){
    this.previews$ = this.previewService()
          .subscribe(value => this.latestValue = value);
  }

  ngOnDestroy(){
    this.previews$.unsubscribe();
  }
}
Enter fullscreen mode Exit fullscreen mode

And then on the message-preview.component.html you would use the latestValue

An effective way of using the async pipe

message-preview.component.ts

import { Component } from '@angular/core';
//other imports

@Component({
  selector: 'message-preview',
  templateUrl: './message-preview.component.html',
})
export class MessagePreviewComponent  {
  previews$: Observable<PreviewResponse[]>;
  latestValue:PreviewResponse[];

  constructor(private previewService: PreviewService){}

  ngOnInit(){
    this.previews$ = this.previewService();
  }
}
Enter fullscreen mode Exit fullscreen mode

Notice here, I do not use the ngOnDestroy() hook because I am not subscribing to anything. And on my template, I will use the observable directly with the | async like:

message-preview.component.html

<div>
--
 <ng-container *ngFor="let preview of previews$ | async">
   {{preview.title}}
 </ng-container>
--
<div>
Enter fullscreen mode Exit fullscreen mode

This way, I do not have to unsubscribe and can go with writing less code.
Until next time.

Discussion

pic
Editor guide