[Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword

Angular allows us to conveniently use the async pipe to automatically register to RxJS observables and render the result into the template once the request succeeds. This has some drawbacks, especially if we want to bind the same data in multiple parts of the template. In this lesson we will learn how we can leverage the async pipe and the as keyword introduced in Angular version 4.0.0 to circumvent such drawbacks.

 

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'person-detail',
  template: `
    <h1>Person Detail</h1>

    <div *ngIf="person$ | async as person">
      Name: {{ person.name }} <br />
      Twitter: {{ person.twitter }}
    </div>
  `
})
export class PersonDetailComponent implements OnInit {
  person$;

  constructor(private http: Http) { }

  ngOnInit() {
    this.person$ = this.http
        .get('./person.json')
        .map(res => res.json());
  }
}