Angular Async Pipe Example
June 18, 2020
On this page we will provide Angular Async Pipe example. It unwraps a value from an asynchronous primitive. If we have Observable or Promise instance then we use it directly with AsyncPipe using directive such as NgFor, NgIf and NgSwitch. AsyncPipe belongs to angular common module. AsyncPipe subscribes to Observable or Promise and returns the latest data. It plays the role that marks the component to check for data changes. AsyncPipe is used as follows.
<div>{{ observableTime | async }} </div>
NgFor. We will display current time using AsyncPipe. We will also provide how to use AsyncPipe with NgIf and NgSwitch directive. Let us find the complete example step by step.
Contents
Software Used
Find the software used in our demo.1. Angular 9.1.11
2. Node.js 12.5.0
3. NPM 6.9.0
Create Service
First of all we are creating a service. Here we are creating different methods that will be used forAsyncPipe demo.
book.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subscriber } from 'rxjs';
import { Book } from './book';
@Injectable({
providedIn: 'root'
})
export class BookService {
url = "api/books";
constructor(private http: HttpClient) { }
//Returns Observable<Book[]>
getBooksWithObservable(): Observable<Book[]> {
return this.http.get<Book[]>(this.url);
}
//Returns Promise<Book[]>
getBooksWithPromise(): Promise<Book[]> {
return this.http.get<Book[]>(this.url).toPromise();
}
//Returns Observable<string>
getCurrentTime(): Observable<string> {
return new Observable<string>((observer: Subscriber<string>) => {
//1 second interval
setInterval(() => observer.next(new Date().toString()), 1000);
});
}
//Returns Promise<Book>
getBookSlowly(): Promise<Book> {
return new Promise(resolve => {
let book = new Book();
book.id = 100;
book.name = 'jQuery Tutorials';
// Delay by 3 second
setTimeout(() => resolve(book), 3000);
});
}
}
Observable: This is a stream of events that can be processed with array-like operators. Every HTTP service method returns an Observable.
Promise: It is a proxy for a value not necessarily known when the promise is created. It does not return immediately a final value. It returns a promise to supply the value at some point in the future.
toPromise(): This is a RxJS operator that converts Observable into Promise.
setInterval(): Sets a time interval after which it re-executes.
setTimeout(): Sets a timeout after which method executes.
Find the test data for Angular In-Memory Web API.
test-data.ts
import { InMemoryDbService } from 'angular-in-memory-web-api';
export class TestData implements InMemoryDbService {
createDb() {
let books = [
{id: 1, name: "Core Java"},
{id: 2, name: "Angular 2"},
{id: 3, name: "Hibernate"},
{id: 4, name: "Spring"}
];
return { books : books };
}
}
export class Book {
id: number;
name: string;
constructor() {
}
}
AsyncPipe with Observable using NgFor
Here we will useAsyncPipe with Observable using NgFor as follows.
observable.component.html
<h3>AsyncPipe with Observable using NgFor</h3>
<ul>
<li *ngFor="let book of observableBooks | async" >
Id: {{book.id}}, Name: {{book.name}}
</li>
</ul>
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BookService } from './book.service';
import { Book } from './book';
@Component({
selector: 'app-observable',
templateUrl: './observable.component.html'
})
export class ObservableComponent implements OnInit {
observableBooks: Observable<Book[]>
constructor(private bookService: BookService) { }
ngOnInit(): void {
this.observableBooks = this.bookService.getBooksWithObservable();
}
}
AsyncPipe with Promise using NgFor
Here we will useAsyncPipe with Promise using NgFor as follows.
promise.component.html
<h3>AsyncPipe with Promise using NgFor</h3>
<ul>
<li *ngFor="let book of promiseBooks | async" >
Id: {{book.id}}, Name: {{book.name}}
</li>
</ul>
import { Component, OnInit } from '@angular/core';
import { BookService } from './book.service';
import { Book } from './book';
@Component({
selector: 'app-promise',
templateUrl: './promise.component.html'
})
export class PromiseComponent implements OnInit {
promiseBooks: Promise<Book[]>
constructor(private bookService: BookService) { }
ngOnInit(): void {
this.promiseBooks = this.bookService.getBooksWithPromise();
}
}
AsyncPipe with NgIf and NgSwitch
FindAsyncPipe with NgIf and NgSwitch.
data.component.html
<h3>AsyncPipe with NgIf</h3>
<div *ngIf="promiseBook | async as book; else loading">
Id: {{book.id}}, Name: {{book.name}}
</div>
<ng-template #loading>Loading Data...</ng-template>
<h3>AsyncPipe with NgSwitch</h3>
<div [ngSwitch]="(promiseBook | async)?.id">
<div *ngSwitchCase="100">Find Actual Data</div>
<div *ngSwitchDefault>Showing Default Data</div>
</div>
import { Component, OnInit } from '@angular/core';
import { BookService } from './book.service';
import { Book } from './book';
@Component({
selector: 'app-data',
templateUrl: './data.component.html'
})
export class DataComponent implements OnInit {
promiseBook: Promise<Book>
constructor(private bookService: BookService) { }
ngOnInit(): void {
this.promiseBook = this.bookService.getBookSlowly();
}
}
AsyncPipe with Date
FindAsyncPipe to display current date and time.
time.component.html
<h3>AsyncPipe with Date</h3>
<div>{{ observableTime | async }} </div> <br/>
<div>{{ observableTime | async | date : 'mediumTime' }} </div>
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BookService } from './book.service';
@Component({
selector: 'app-time',
templateUrl: './time.component.html'
})
export class TimeComponent implements OnInit {
observableTime: Observable<string>
constructor(private bookService: BookService) { }
ngOnInit(): void {
this.observableTime = this.bookService.getCurrentTime();
}
}
Application Component and Module
Find the application component and module.app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-observable></app-observable>
<app-promise></app-promise>
<app-data></app-data>
<app-time></app-time>
`
})
export class AppComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ObservableComponent } from './observable.component';
import { PromiseComponent } from './promise.component';
import { TimeComponent } from './time.component';
import { DataComponent } from './data.component';
//For InMemory testing
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { TestData } from './test-data';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
InMemoryWebApiModule.forRoot(TestData)
],
declarations: [
AppComponent,
ObservableComponent,
PromiseComponent,
TimeComponent,
DataComponent
],
providers: [
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
Test Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Install angular-in-memory-web-api@0.11.0
4. Run ng serve using command prompt.
5. Access the URL http://localhost:4200
Find the print screen of the output.
