diff --git a/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts
index 089468ba0a..3f1ce4a4fa 100644
--- a/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts
@@ -4,7 +4,7 @@ import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.com
 
 @Component({
   selector: 'sg-app',
-  template: '<toh-hero-button></toh-hero-button>',
+  template: '<toh-hero-button label="OK"></toh-hero-button>',
   directives: [HeroButtonComponent]
 })
 export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
index cc2ccd6e98..b299740765 100644
--- a/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
@@ -4,7 +4,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 // #docregion example
 @Component({
   selector: 'toh-hero-button',
-  template: `<button>OK</button>`
+  template: `<button>{{label}}</button>`
 })
 export class HeroButtonComponent {
   @Output() change = new EventEmitter<any>();