From bc54249037a21352d31d9c5b9cc8bfcf1332574c Mon Sep 17 00:00:00 2001
From: Justin DuJardin <justin@dujardinconsulting.com>
Date: Wed, 16 Dec 2015 06:37:28 -0800
Subject: [PATCH] fix(examples): issue where demos would not load in firefox

 - apparently firefox cannot manage [innerText]="" style bindings.  Use interpolated strings in the body of elements for now {{ yay }}
---
 examples/app.html                                      |  2 +-
 examples/app.scss                                      |  2 +-
 examples/app.ts                                        | 10 ++++++++++
 examples/components/progress_circular/basic_usage.html |  2 +-
 examples/components/progress_linear/basic_usage.html   |  2 +-
 examples/components/radio/basic_usage.html             |  2 +-
 examples/example.html                                  |  8 +++-----
 7 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/examples/app.html b/examples/app.html
index b9c96bfd..5c3573ad 100644
--- a/examples/app.html
+++ b/examples/app.html
@@ -25,7 +25,7 @@ <h1>Components</h1>
 
 
   <section *ngFor="#value of meta" [id]="value.id">
-    <h1 [innerText]="value.name"></h1>
+    <h1>{{ value.name }}</h1>
     <example *ngFor="#demo of value.examples" [model]="demo"></example>
     <md-divider></md-divider>
   </section>
diff --git a/examples/app.scss b/examples/app.scss
index a06be0e7..dcd53669 100644
--- a/examples/app.scss
+++ b/examples/app.scss
@@ -34,7 +34,7 @@ demos-app {
       font-size: rem(3.4);
       font-weight: 400;
       line-height: rem(4);
-      margin-bottom: 30px;
+      margin-bottom: rem(4);
     }
 
     .examples-intro {
diff --git a/examples/app.ts b/examples/app.ts
index 37e01bd8..4ee9410b 100644
--- a/examples/app.ts
+++ b/examples/app.ts
@@ -29,6 +29,16 @@ export class DemosApp {
   constructor(http: Http) {
     http.get('public/meta.json')
       .subscribe((res: Response) => {
+        // HACKS: use to filter down to a single example for testing
+        //let data = res.json();
+        //let results = [];
+        //data.forEach((d) => {
+        //  if(d.name === 'Toolbar'){
+        //    results.push(d);
+        //  }
+        //});
+        //this.meta = results;
+
         this.meta = res.json();
         console.log(this.meta);
       });
diff --git a/examples/components/progress_circular/basic_usage.html b/examples/components/progress_circular/basic_usage.html
index 933b57f2..59226b93 100644
--- a/examples/components/progress_circular/basic_usage.html
+++ b/examples/components/progress_circular/basic_usage.html
@@ -45,7 +45,7 @@ <h4>Theming </h4>
         [checked]="activated"
         (md-on-change)="toggleActivation()"
         aria-label="Toggle Progress Circular Indicators">
-      <h5 [innerText]="activated?'On':'Off'"></h5>
+      <h5>{{ activated?'On':'Off' }}</h5>
     </md-switch>
   </div>
 
diff --git a/examples/components/progress_linear/basic_usage.html b/examples/components/progress_linear/basic_usage.html
index 247b3067..b876c399 100644
--- a/examples/components/progress_linear/basic_usage.html
+++ b/examples/components/progress_linear/basic_usage.html
@@ -51,7 +51,7 @@ <h4 class="md-title">Query</h4>
         [checked]="activated"
         (mdOnChange)="toggleActivation()"
         aria-label="Enable Indicators">
-      <h5 [innerText]="activated ? 'On' : 'Off'"></h5>
+      <h5>{{ activated ? 'On' : 'Off' }}</h5>
     </md-switch>
   </div>
 
diff --git a/examples/components/radio/basic_usage.html b/examples/components/radio/basic_usage.html
index 30bf3578..703cbb2a 100644
--- a/examples/components/radio/basic_usage.html
+++ b/examples/components/radio/basic_usage.html
@@ -1,5 +1,5 @@
 <form ng-submit="submit()">
-  <p>Selected Value: <span class="radioValue" [innerText]="data.group1"></span></p>
+  <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span></p>
 
   <md-radio-group [(value)]="data.group1">
 
diff --git a/examples/example.html b/examples/example.html
index 3b1947a0..f05e3116 100644
--- a/examples/example.html
+++ b/examples/example.html
@@ -1,21 +1,19 @@
 <div class="doc-demo-content doc-content">
   <div flex layout="column" style="z-index:1">
 
-    <div class="doc-description" ng-bind-html="demoCtrl.demoDescription.contents | toHtml"></div>
-
     <section class="demo-container md-whiteframe-z1"
-             ng-class="{'show-source': demoCtrl.$showSource}">
+             [ngClass]="{'show-source': showSource}">
 
       <md-toolbar class="demo-toolbar md-primary">
         <div class="md-toolbar-tools">
-          <h3 [innerText]="model?.name"></h3>
+          <h3>{{ model?.name }}</h3>
           <span flex></span>
           <button md-button *ngFor="#file of orderedFiles"
                   aria-label="View Source"
                   [style.display]="showSource!=true?'none':'block'"
                   [ngClass]="{ active: selected==file.type }"
-                  [innerText]="file.type"
                   (click)="selected=file.type">
+            {{ file.type }}
           </button>
           <button md-button
                   class="md-icon-button"