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

closes #494
2015-12-13 22:29:37 -08:00 · 2015-12-13 22:29:37 -08:00 · 6dc9e5d10b
parent 7cf097ea68
commit 6dc9e5d10b
5 changed files with 65 additions and 32 deletions
--- a/public/docs/_examples/template-syntax/ts/app/app.component.html
+++ b/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>
--- a/public/docs/_examples/template-syntax/ts/app/app.component.ts
+++ b/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}
    }
  }

--- a/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts
+++ b/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;">
--- a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts
+++ b/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){
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/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