Fixing demo page

jyc913 · Sep 7, 2016 · 6f42e30 · 6f42e30
1 parent e9d356b
commit 6f42e30
Showing 1 changed file with 19 additions and 26 deletions.
diff --git a/demo/components/file-upload-section.ts b/demo/components/file-upload-section.ts
@@ -1,8 +1,5 @@
 import {Component} from '@angular/core';
 
-import {SimpleDemoComponent} from './file-upload/simple-demo';
-
-let name = 'File Upload';
 let doc = require('../../components/file-upload/readme.md');
 
 let tabDesc:Array<any> = [
@@ -14,65 +11,61 @@ let tabDesc:Array<any> = [
   }
 ];
 
-let tabsContent:string = ``;
-tabDesc.forEach((desc:any) => {
-  tabsContent += `
-          <tab [heading]="desc.heading" (select)="select($event)">
+// <{{desc.heading.toLowerCase()}}-demo *ngIf="currentHeading === '{{desc.heading}}'"></{{desc.heading.toLowerCase()}}-demo>
+
+@Component({
+  selector: 'file-upload-section',
+  template: `
+  <section [id]="name.toLowerCase()">
+    <div class="row">
+      <tabset>
+         <tab *ngFor="let desc of tabs" heading="{{desc.heading}}" (select)="select($event)">
           <div class="card card-block panel panel-default panel-body">
 
-            <{{desc.heading.toLowerCase()}}-demo *ngIf="currentHeading === '{{desc.heading}}'"></{{desc.heading.toLowerCase()}}-demo>
+            <simple-demo></simple-demo>
 
             <br>
 
             <div class="row" style="margin: 0px;">
               <tabset>
                 <tab heading="Markup">
                   <div class="card card-block panel panel-default panel-body">
-                    <pre class="language-html"><code class="language-html" ng-non-bindable>{{desc.html}}</code></pre>
+                    <pre class="language-html"><code class="language-html" ng-non-bindable [innerHTML]="desc.html"></code></pre>
                   </div>
                 </tab>
                 <tab heading="TypeScript">
                   <div class="card card-block panel panel-default panel-body">
-                    <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>{{desc.ts}}</code></pre>
+                    <pre class="language-typescript"><code class="language-typescript" ng-non-bindable [innerHTML]="desc.ts"></code></pre>
                   </div>
                 </tab>
                 <tab heading="Backend Demo">
                   <div class="card card-block panel panel-default panel-body">
-                    <pre class="language-javascript"><code class="language-javascript" ng-non-bindable>{{desc.js}}</code></pre>
+                    <pre class="language-javascript"><code class="language-javascript" ng-non-bindable [innerHTML]="desc.js"></code></pre>
                   </div>
                 </tab>
               </tabset>
             </div>
           </div>
         </tab>
-  `;
-});
-
-@Component({
-  selector: 'file-upload-section',
-  template: `
-  <section [id]="name.toLowerCase()">
-    <div class="row">
-      <tabset>
-
-        {{tabsContent}}
-
       </tabset>
     </div>
 
     <div class="row">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">{{doc}}</div>
+      <div class="card card-block panel panel-default panel-body" [innerHTML]="doc"></div>
     </div>
   </section>
-  `
+  `,
 })
 export class FileUploadSectionComponent {
+  public name:string = 'File Upload';
   public currentHeading:string = 'Simple';
+  public doc:string = doc;
+  public tabs:any = tabDesc;
 
   public select(e:any):void {
     if (e.heading) {
       this.currentHeading = e.heading;
     }
   }
-}
+}