docs(guide/template-syntax): copy edit TypeScript version

Also update some samples. This PR replaces #734 & #756.

public/docs/_examples/template-syntax/ts/app/app.component.html

@@ -208,9 +208,9 @@ button</button>
 <!-- #enddocregion class-binding-1 -->
 
 <!-- #docregion class-binding-2 -->
-<!-- reset all class names with a string binding  -->
+<!-- reset/override all class names with a binding  -->
 <div class="bad curly special"
-     [class]="'bad curly'">Bad curly</div>
+     [class]="badCurly">Bad curly</div>
 <!-- #enddocregion class-binding-2 -->
 
 <!-- #docregion class-binding-3 -->
@@ -370,24 +370,14 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <p>setStyles returns {{setStyles() | json}}</p>
 <!-- #docregion NgStyle-2 -->
 <div [ngStyle]="setStyles()">
-  This div is italic, normal weight, and x-large
+  This div is italic, normal weight, and extra large (24px)
 </div>
 <!-- #enddocregion NgStyle-2 -->
-<div [ngStyle]="setStyles()" #styleDiv>
+<p>After setStyles(), the DOM confirms that the styles are
-  After setStyles(), the styles are "{{getStyles(styleDiv)}}"
+  <span [ngStyle]="setStyles()" #styleDiv>
-</div>
+    "{{getStyles(styleDiv)}}"
-
+  </span>.
-
+</p>
-<h3>Use setStyles2() - camelCase style property names</h3>
-<p>setStyles2 returns {{setStyles2() | json}}</p>
-<!-- #docregion NgStyle-3 -->
-<div [ngStyle]="setStyles2()">
-  This div is italic, normal weight, and x-large
-</div>
-<!-- #enddocregion NgStyle-3 -->
-<div [ngStyle]="setStyles2()" #styleDiv2>
-  After setStyles2(), the styles are "{{getStyles(styleDiv2)}}"
-</div>
 
 <!-- not used in chapter -->
 
@@ -480,8 +470,8 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <br>
 
 <div class="box">
-  <!-- #docregion NgFor-3 -->
   <!-- Ex: 1 - Hercules Son of Zeus -->
+  <!-- #docregion NgFor-3 -->
   <div *ngFor="#hero of heroes, #i=index">{{i + 1}} - {{hero.fullName}}</div>
   <!-- #enddocregion NgFor-3 -->
 </div>

public/docs/_examples/template-syntax/ts/app/app.component.ts

@@ -29,6 +29,7 @@ export class AppComponent {
 
   actionName = 'Go for it';
   alert = alerter;
+  badCurly = 'bad curly';
   callFax(value:string)   {this.alert(`Faxing ${value} ...`)}
   callPhone(value:string) {this.alert(`Calling ${value} ...`)}
   canSave =  true;
@@ -130,7 +131,7 @@ export class AppComponent {
       // CSS property names
       'font-style':  this.canSave      ? 'italic' : 'normal',  // italic
       'font-weight': !this.isUnchanged ? 'bold'   : 'normal',  // normal
-      'font-size':   this.isSpecial    ? 'x-large': 'smaller', // larger
+      'font-size':   this.isSpecial    ? '24px'   : '8px',     // 24px
     }
     // #enddocregion setStyles
     // compensate for DevMode (sigh)
@@ -143,25 +144,6 @@ export class AppComponent {
   }
   // #enddocregion setStyles
 
-  // #docregion setStyles2
-  setStyles2() {
-    let styles = {
-      // camelCase style properties work too
-      fontStyle:  this.canSave      ? 'italic' : 'normal',  // italic
-      fontWeight: !this.isUnchanged ? 'bold'   : 'normal',  // normal
-      fontSize:   this.isSpecial    ? 'x-large': 'smaller', // larger
-    }
-    // #enddocregion setStyles2
-    // compensate for DevMode (sigh)
-    if (JSON.stringify(styles) === JSON.stringify(this._priorStyles2)){
-       return this._priorStyles2;
-    }
-    this._priorStyles2 = styles;
-    // #docregion setStyles2
-    return styles;
-  }
-  // #enddocregion setStyles2
-
   toeChoice = '';
   toeChooser(picker:HTMLFieldSetElement){
     let choices = picker.children;