diff --git a/public/docs/_examples/style-guide/e2e-spec.js b/public/docs/_examples/style-guide/e2e-spec.js
index 31b6db0136..dcd5f2af20 100644
--- a/public/docs/_examples/style-guide/e2e-spec.js
+++ b/public/docs/_examples/style-guide/e2e-spec.js
@@ -58,6 +58,9 @@ describe('Style Guide', function () {
   it('03-05', function () {
     browser.get('#/03-05');
 
+    var div = element(by.tagName('sg-app > div'));
+    expect(div.getText()).toBe('Actual favorite: Windstorm');
+
     var lis = element.all(by.tagName('sg-app > ul > li'));
     expect(lis.get(0).getText()).toBe('Windstorm');
     expect(lis.get(1).getText()).toBe('Bombasto');
@@ -68,6 +71,9 @@ describe('Style Guide', function () {
   it('03-06', function () {
     browser.get('#/03-06');
 
+    var div = element(by.tagName('sg-app > div'));
+    expect(div.getText()).toBe('Actual favorite: Windstorm');
+
     var lis = element.all(by.tagName('sg-app > ul > li'));
     expect(lis.get(0).getText()).toBe('Windstorm');
     expect(lis.get(1).getText()).toBe('Bombasto');
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.component.html b/public/docs/_examples/style-guide/ts/03-05/app/app.component.html
index 3c05329f3f..67fb0d5964 100644
--- a/public/docs/_examples/style-guide/ts/03-05/app/app.component.html
+++ b/public/docs/_examples/style-guide/ts/03-05/app/app.component.html
@@ -1,3 +1,4 @@
+<div>Actual favorite: {{favorite?.name}}</div>
 <ul>
   <li *ngFor="let hero of heroes">
     {{hero.name}}
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts
index 9cc5ee4ec3..216c1e9109 100644
--- a/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts
@@ -11,11 +11,13 @@ import { Hero } from './+heroes/shared/hero.model';
   providers: [HeroService, ExceptionService, SpinnerService, ToastService]
 })
 export class AppComponent implements OnInit {
+  favorite: Hero;
   heroes: Hero[];
 
   constructor(private heroService: HeroService) { }
 
   ngOnInit() {
+    this.heroService.getHero(1).subscribe(hero => this.favorite = hero);
     this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
   }
 }
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.component.html b/public/docs/_examples/style-guide/ts/03-06/app/app.component.html
index 3c05329f3f..67fb0d5964 100644
--- a/public/docs/_examples/style-guide/ts/03-06/app/app.component.html
+++ b/public/docs/_examples/style-guide/ts/03-06/app/app.component.html
@@ -1,3 +1,4 @@
+<div>Actual favorite: {{favorite?.name}}</div>
 <ul>
   <li *ngFor="let hero of heroes">
     {{hero.name}}
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts
index 9cc5ee4ec3..216c1e9109 100644
--- a/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts
@@ -11,11 +11,13 @@ import { Hero } from './+heroes/shared/hero.model';
   providers: [HeroService, ExceptionService, SpinnerService, ToastService]
 })
 export class AppComponent implements OnInit {
+  favorite: Hero;
   heroes: Hero[];
 
   constructor(private heroService: HeroService) { }
 
   ngOnInit() {
+    this.heroService.getHero(1).subscribe(hero => this.favorite = hero);
     this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
   }
 }
diff --git a/public/docs/_examples/style-guide/ts/app/hero-data.ts b/public/docs/_examples/style-guide/ts/app/hero-data.ts
index 001af65e85..f3e6feb91c 100644
--- a/public/docs/_examples/style-guide/ts/app/hero-data.ts
+++ b/public/docs/_examples/style-guide/ts/app/hero-data.ts
@@ -1,10 +1,10 @@
 export class HeroData {
   createDb() {
     let heroes = [
-      { id: '1', name: 'Windstorm' },
-      { id: '2', name: 'Bombasto' },
-      { id: '3', name: 'Magneta' },
-      { id: '4', name: 'Tornado' }
+      { id: 1, name: 'Windstorm' },
+      { id: 2, name: 'Bombasto' },
+      { id: 3, name: 'Magneta' },
+      { id: 4, name: 'Tornado' }
     ];
     return {heroes};
   }