add "dynamic" state example on home

Author: clarketm

src/app/home/home.component.html

@@ -23,23 +23,11 @@ <h4>Local State</h4>
       </tr>
       </thead>
       <tbody>
-      <tr>
-        <td>Thor Walton</td>
-        <td>Regional Director</td>
-        <td>45</td>
-        <td>$98,540</td>
-      </tr>
-      <tr>
-        <td>Travis Clarke</td>
-        <td>Software Engineer</td>
-        <td>30</td>
-        <td>$275,000</td>
-      </tr>
-      <tr>
-        <td>Suki Burks</td>
-        <td>Office Manager</td>
-        <td>22</td>
-        <td>$67,670</td>
+      <tr *ngFor="let item of localState.data">
+        <td>{{ item.name }}</td>
+        <td>{{ item.position }}</td>
+        <td>{{ item.age }}</td>
+        <td>{{ item.salary }}</td>
       </tr>
       </tbody>
       <tfoot>
@@ -55,9 +43,9 @@ <h4>Local State</h4>
     <form (ngSubmit)="submitState(localState.value)" autocomplete="off">
 
       <input
-        [value]="localState.value"
-        (input)="localState.value = $event.target.value"
-        placeholder="Submit Local State to App State"
+        [value]="localState.data[1].salary"
+        (input)="localState.data[1].salary = $event.target.value"
+        placeholder="Change my salary"
         autofocus>
 
       <button>Submit Value</button>

src/app/home/home.component.ts

@@ -1,12 +1,13 @@
 import {
+  AfterContentChecked,
   Component,
   OnInit
 } from '@angular/core';
 
 import { AppState } from '../app.service';
 import { Title } from './title';
 import { XLargeDirective } from './x-large';
-import {TableExport} from 'tableexport';
+import { TableExport } from 'tableexport';
 
 @Component({
   /**
@@ -30,11 +31,35 @@ import {TableExport} from 'tableexport';
    */
   templateUrl: './home.component.html'
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, AfterContentChecked {
   /**
    * Set our default values
    */
-  public localState = { value: '' };
+  public localState = {
+    value: '' ,
+    data: [
+      {
+        name: 'Thor Walton',
+        position: 'Regional Director',
+        age: 45,
+        salary: '$98,540'
+      },
+      {
+        name: 'Travis Clarke',
+        position: 'Software Engineer',
+        age: 30,
+        salary: '$275,000'
+      },
+      {
+        name: 'Suki Burks',
+        position: 'Office Manager',
+        age: 22,
+        salary: '$67,670'
+      }
+    ]
+  };
+
+  public te: TableExport;
   /**
    * TypeScript public modifiers
    */
@@ -50,10 +75,10 @@ export class HomeComponent implements OnInit {
      */
   }
 
-  public ngAfterContentInit() {
-    new TableExport(document.querySelector('#default-table'), {
+  public ngAfterContentChecked() {
+    this.te = new TableExport(document.querySelector('#default-table'), {
       formats: ['xlsx', 'xls', 'csv', 'txt']
-    });
+    }).reset();
   }
 
   public submitState(value: string) {