docs(Template Syntax): correct minor oversights in a.53 update

closes #494

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

@@ -363,6 +363,7 @@ After setClasses(), the classes are "{{classDiv.className}}"
 </div>
 <!-- #enddocregion NgStyle-1 -->
 
+<h3>Use setStyles() - CSS property names</h3>
 <p>setStyles returns {{setStyles() | json}}</p>
 <!-- #docregion NgStyle-2 -->
 <div [ngStyle]="setStyles()">
@@ -373,6 +374,18 @@ After setClasses(), the classes are "{{classDiv.className}}"
   After setStyles(), the styles are "{{getStyles(styleDiv)}}"
 </div>
 
+
+<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()" #styleDiv>
+  After setStyles2(), the styles are "{{getStyles(styleDiv)}}"
+</div>
+
 <!-- not used in chapter -->
 
 
@@ -421,25 +434,29 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <!-- NgSwitch binding -->
 <hr><h2>NgSwitch Binding</h2>
 
-<fieldset #toePicker (click)="null" >
+<fieldset #toePicker (click)="toeChooser(toePicker)" >
   <input type="radio" name="toes" value="Eenie">Eenie
-  <input type="radio" name="toes" checked value="Meanie">Meanie
+  <input type="radio" name="toes" value="Meanie">Meanie
   <input type="radio" name="toes" value="Miney">Miney
   <input type="radio" name="toes" value="Moe">Moe
   <input type="radio" name="toes" value="???">???
 </fieldset>
-<!-- #docregion NgSwitch -->
-<div class="toe">You picked
-  <span [ngSwitch]="toeChoice(toePicker)">
-    <template [ngSwitchWhen]="'Eenie'">Eenie</template>
-    <template [ngSwitchWhen]="'Meanie'">Meanie</template>
-    <template [ngSwitchWhen]="'Miney'">Miney</template>
-    <template [ngSwitchWhen]="'Moe'">Moe</template>
-    <template ngSwitchDefault>Other</template>
-  </span>
-</div>
-<!-- #enddocregion NgSwitch -->
 
+<div class="toe">
+  <div *ngIf="!toeChoice">Pick a toe</div>
+  <div *ngIf="toeChoice">You picked
+    <!-- #docregion NgSwitch -->      
+    <span [ngSwitch]="toeChoice">
+      <template [ngSwitchWhen]="'Eenie'">Eenie</template>
+      <template [ngSwitchWhen]="'Meanie'">Meanie</template>
+      <template [ngSwitchWhen]="'Miney'">Miney</template>
+      <template [ngSwitchWhen]="'Moe'">Moe</template>
+      <template ngSwitchDefault>Other</template>
+    </span>
+    <!-- #enddocregion NgSwitch -->    
+  </div>
+
+</div>
 
 <!-- NgFor binding -->
 <hr><h2>NgFor Binding</h2>
@@ -462,7 +479,7 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <div class="box">
   <!-- Ex: 1 - Hercules Son of Zeus -->
   <!-- #docregion NgFor-3 -->
-  <div *ngFor="#hero of heroes, #i=index">{{i+1}} - {{hero.fullName}}</div>
+  <div *ngFor="#hero of heroes, #i=index">{{i + 1}} - {{hero.fullName}}</div>
   <!-- #enddocregion NgFor-3 -->
 </div>
 <br>

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

@@ -111,18 +111,31 @@ export class AppComponent {
   // #docregion setStyles
   setStyles() {
     return {
+      // 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
     }
   }
   // #enddocregion setStyles
-
+ 
-  toeChoice(picker:HTMLFieldSetElement){
+  // #docregion setStyles2
+  setStyles2() {
+    return {
+      // camelCase style properties works too
+      fontStyle:  this.canSave      ? 'italic' : 'normal',  // italic
+      fontWeight: !this.isUnchanged ? 'bold'   : 'normal',  // normal
+      fontSize:   this.isSpecial    ? 'x-large': 'smaller', // larger
+    }
+  }
+  // #enddocregion setStyles2
+  
+  toeChoice = '';
+  toeChooser(picker:HTMLFieldSetElement){
     let choices = picker.children;
     for (let i=0; i<choices.length; i++){
       var choice = <HTMLInputElement>choices[i];
-      if (choice.checked) {return choice.value}
+      if (choice.checked) {return this.toeChoice = choice.value}
     }
   }
 

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

@@ -1,3 +1,4 @@
+// #docplaster
 import {Component, Input, Output, EventEmitter} from 'angular2/core';
 
 import {Hero} from './hero';
@@ -39,10 +40,6 @@ export class HeroDetailComponent {
 
 @Component({
   selector: 'big-hero-detail',
-  /*
-  inputs: ['hero'],
-  outputs: ['deleted'],
-  */
   template: `
   <div style="border: 1px solid black; padding:3px">
     <img src="{{heroImageUrl}}" style="float:left; margin-right:8px;">

public/docs/_examples/template-syntax/ts/app/my-click.directive.ts

@@ -1,10 +1,11 @@
+// #docplaster
 import {Directive,  Output, ElementRef, EventEmitter} from 'angular2/core';
 
 @Directive({selector:'[mClick]'})
 export class MyClickDirective {
-  // #docregion myClick-output-1
+  // #docregion my-click-output-1
   @Output('myClick') clicks = new EventEmitter<string>();
- // #enddocregion myClick-output-1
+ // #enddocregion my-click-output-1
   constructor(el: ElementRef){
     el.nativeElement
       .addEventListener('click', (event:Event) => {
@@ -13,14 +14,14 @@ export class MyClickDirective {
   }
 }
 
-// #docregion myClick-output-2
+// #docregion my-click-output-2
 @Directive({
-// #enddocregion myClick-output-2
+// #enddocregion my-click-output-2
   selector:'[myClick2]',
-// #docregion myClick-output-2
+// #docregion my-click-output-2
   outputs:['clicks:myClick']
 })
-// #enddocregion myClick-output-2
+// #enddocregion my-click-output-2
 export class MyClickDirective2 {
   clicks = new EventEmitter<string>();
   constructor(el: ElementRef){

public/docs/ts/latest/guide/template-syntax.jade

@@ -669,7 +669,7 @@ code-example(format="", language="html").
 :marked
   Here are all variations in action, including the uppercase version:
 figure.image-display
-    img(src='/resources/images/devguide/template-syntax/ngModel-anim.gif' alt="NgModel variations")
+    img(src='/resources/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations")
 :marked
 
 .l-main-section
@@ -683,7 +683,7 @@ figure.image-display
   We don’t need many of those directives in Angular 2.
   Quite often we can achieve the same results with the more capable and expressive Angular 2 binding system.
   Why create a directive to handle a click when we can write a simple binding such as this?
-+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-2')(format=".")
++makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
   We still benefit from directives that simplify complex tasks.
   Angular still ships with built-in directives; just not as many.
@@ -735,6 +735,10 @@ figure.image-display
 :marked
   Now add an `NgStyle` property binding to call it like this
 +makeExample('template-syntax/ts/app/app.component.html', 'NgStyle-2')(format=".")
+:marked
+  Alternatively, we can return an object with camelCase style property names with the same effects:
++makeExample('template-syntax/ts/app/app.component.ts', 'setStyles2')(format=".")
+:marked
 
 <a id="ngIf"></a>
 .l-main-section
@@ -953,7 +957,7 @@ figure.image-display
   We’re passing those `input` element objects across to the
   button elements where they become arguments to the `call()` methods in the event bindings.
   
-  ### Form variables
+  ### NgForm and local template variables
   Let's look at one final example, a Form, the poster child for local template variables.
   
   The HTML for a form can be quite involved as we saw in the [Forms](forms.html) chapter.
@@ -968,7 +972,7 @@ figure.image-display
   
   It would be the [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement) 
   if Angular hadn't taken it over.
-  It's actually the Angular built-in `Form` directive that wraps the native `HTMLFormElement`
+  It's actually `ngForm`, a reference to the Angular built-in `NgForm` directive that wraps the native `HTMLFormElement`
   and endows it with additional super powers such as the ability to
   track the validity of user input.
 
@@ -1032,7 +1036,8 @@ figure.image-display
   +makeExample('template-syntax/ts/app/hero-detail.component.ts', 'input-output-2')(format=".")
   <br>
   :marked
-    We can specify an input/output property with a decorator or in one the metadata arrays &mdash; but not both.
+    We can specify an input/output property with a decorator or in one the metadata arrays.
+    Don't do both!
 :marked
   ### Aliasing input/output properties