Pipes Demo - Async Pipe

async-with-pipe.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-async-with-pipe',
  template: `
    <p *ngIf = 'character | async as char; else loading'>
       {{char | json}}
    </p>
    <ng-template #loading>
       <p>Loading using pipe...</p>
    </ng-template>
  `,
  styleUrls: []
})
export class AsyncWithPipeComponent {
  character: Observable<any>;

  constructor(private http: HttpClient) {
    this.character = this.http.get('https://swapi.co/api/people/1');
  }
}