docs(reactive-forms): converted HeroService to Observable

Author: wardbell

public/docs/_examples/reactive-forms/ts/app/demo.component.html

@@ -18,12 +18,12 @@ <h4><i>Pick a demo:</i>
 
   <div *ngIf="demo >= 5 && demo !== final" >
 
-    <p *ngIf="!heroes"><b><i>Loading heroes ... </i></b></p>
-    <h3 *ngIf="heroes">Select a hero:</h3>
+    <h3 *ngIf="isLoading"><i>Loading heroes ... </i></h3>
+    <h3 *ngIf="!isLoading">Select a hero:</h3>
 
     <nav>
       <button (click)="getHeroes()" class="btn btn-primary">Refresh</button>
-      <a *ngFor="let hero of heroes" (click)="select(hero)">{{hero.name}}</a>
+      <a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
     </nav>
 
     <div *ngIf="selectedHero">

public/docs/_examples/reactive-forms/ts/app/demo.component.ts

@@ -1,5 +1,6 @@
 /* tslint:disable:member-ordering */
-import { Component } from '@angular/core';
+import { Component }  from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 
 import { Hero }        from './data-model';
 import { HeroService } from './hero.service';
@@ -24,16 +25,17 @@ export class DemoComponent {
   final = this.demos.length;
   demo = this.final; // current demo
 
-  heroes: Hero[];
+  heroes: Observable<Hero[]>;
+  isLoading = false;
   selectedHero: Hero;
 
   constructor(private heroService: HeroService) { }
 
   getHeroes() {
+    this.isLoading = true;
+    this.heroes = this.heroService.getHeroes()
+                      .finally(() => this.isLoading = false);
     this.selectedHero = undefined;
-    this.heroes       = undefined;
-    return this.heroService.getHeroes()
-               .then(heroes => this.heroes = heroes);
   }
 
   select(hero: Hero) { this.selectedHero = hero; }

public/docs/_examples/reactive-forms/ts/app/hero-detail.component.ts

@@ -65,7 +65,7 @@ export class HeroDetailComponent implements OnChanges {
   // #docregion on-submit
   onSubmit() {
     this.hero = this.prepareSaveHero();
-    this.heroService.updateHero(this.hero);
+    this.heroService.updateHero(this.hero).subscribe();
     this.ngOnChanges();
   }
   // #enddocregion on-submit

public/docs/_examples/reactive-forms/ts/app/hero-list.component.1.html

@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <nav>
-  <a *ngFor="let hero of heroes" (click)="select(hero)">{{hero.name}}</a>
+  <a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
 </nav>
 
 <div *ngIf="selectedHero">

public/docs/_examples/reactive-forms/ts/app/hero-list.component.html

@@ -1,10 +1,10 @@
 <!-- #docregion -->
-<p *ngIf="!heroes"><b><i>Loading heroes ... </i></b></p>
-<h3 *ngIf="heroes">Select a hero:</h3>
+<h3 *ngIf="isLoading"><i>Loading heroes ... </i></h3>
+<h3 *ngIf="!isLoading">Select a hero:</h3>
 
 <nav>
   <button (click)="getHeroes()" class="btn btn-primary">Refresh</button>
-  <a *ngFor="let hero of heroes" (click)="select(hero)">{{hero.name}}</a>
+  <a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
 </nav>
 
 <div *ngIf="selectedHero">

public/docs/_examples/reactive-forms/ts/app/hero-list.component.ts

@@ -1,5 +1,7 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
+import { Observable }        from 'rxjs/Observable';
+import 'rxjs/add/operator/finally';
 
 import { Hero }        from './data-model';
 import { HeroService } from './hero.service';
@@ -10,18 +12,19 @@ import { HeroService } from './hero.service';
   templateUrl: 'hero-list.component.html'
 })
 export class HeroListComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Observable<Hero[]>;
+  isLoading = false;
   selectedHero: Hero;
 
   constructor(private heroService: HeroService) { }
 
   ngOnInit() { this.getHeroes(); }
 
   getHeroes() {
+    this.isLoading = true;
+    this.heroes = this.heroService.getHeroes()
+                      .finally(() => this.isLoading = false);
     this.selectedHero = undefined;
-    this.heroes = undefined;
-    return this.heroService.getHeroes()
-               .then(heroes => this.heroes = heroes);
   }
 
   select(hero: Hero) { this.selectedHero = hero; }

public/docs/_examples/reactive-forms/ts/app/hero.service.ts

@@ -1,28 +1,25 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
+import { Observable } from 'rxjs/Observable';
+import { of }         from 'rxjs/observable/of';
+import 'rxjs/add/operator/delay';
+
 import { Hero, heroes } from './data-model';
 
 @Injectable()
 export class HeroService {
 
-  getHeroes(): Promise<Hero[]> {
-    return new Promise<Hero[]>(resolve => {
-      // simulate server latency with delay
-      setTimeout(() => resolve(heroes), 500);
-    });
+  delayMs = 500;
+
+  getHeroes(): Observable<Hero[]> {
+    return of(heroes).delay(this.delayMs); // simulate latency with delay
   }
 
-  updateHero(hero: Hero): Promise<Hero>  {
-    // Demo: faking server update; nothing can go wrong ;-)
-    return new Promise<Hero>(resolve => {
-      // simulate server latency with delay
-      const ix = heroes.findIndex(h => h.id === hero.id);
-      setTimeout(() => {
-        // Demo: mutate cached hero
-        Object.assign(heroes[ix], hero);
-        resolve(hero);
-      }, 500);
-    });
+  // Demo: faking server update; assume nothing can go wrong ;-)
+  updateHero(hero: Hero): Observable<Hero>  {
+    const oldHero = heroes.find(h => h.id === hero.id);
+    const newHero = Object.assign(oldHero, hero); // Demo: mutate cached hero
+    return of(newHero).delay(this.delayMs); // simulate latency with delay
   }
 }