Pipes Demo - Async without Pipe

async-without-pipe.component.ts

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

@Component({
  selector: 'app-async-without-pipe',
  template: `
    <p *ngIf = 'dataLoaded; else loading'>{{character | json}}</p>
    <ng-template #loading>
       <p>Getting data from SWAPI...</p>
    </ng-template>
  `,
  styleUrls: []
})
export class AsyncWithoutPipeComponent {

  character: object;
  dataLoaded: boolean = false;

  constructor(private http: HttpClient) {
    this.http.get(`https://swapi.co/api/people/1`).subscribe(char => {
      this.character = char;
      this.dataLoaded = true;
    })
  }
}