step 12: refactor to use AsyncPipe in ContactsListComponent

Author: cburgdorf

src/app/contacts-list/contacts-list.component.html

@@ -1,5 +1,5 @@
 <ul class="collection">
-  <li class="collection-item avatar" *ngFor="let contact of contacts">
+  <li class="collection-item avatar" *ngFor="let contact of contacts | async">
     <a [routerLink]="['/contact', contact.id]">
       <img [src]="contact.image" alt="" class="circle">
       <span class="title">{{contact.name}}</span>

src/app/contacts-list/contacts-list.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 import { ContactsService } from '../contacts.service';
 import { Contact } from '../models/contact';
 
@@ -9,13 +10,12 @@ import { Contact } from '../models/contact';
 })
 export class ContactsListComponent implements OnInit {
 
-  contacts: Array<Contact>;
+  contacts: Observable<Array<Contact>>;
 
   constructor(private contactsService: ContactsService) {}
 
   ngOnInit() {
-    this.contactsService.getContacts()
-                        .subscribe(contacts => this.contacts = contacts);
+    this.contacts = this.contactsService.getContacts();
   }
 
 }