docs(aio): update migrated content from anguar.io

aio/content/examples/template-syntax/src/app/app.component.html

@@ -158,15 +158,15 @@
 
 <div>
   <!-- #docregion property-binding-syntax-1 -->
-  <img [src] = "heroImageUrl">
+  <img [src]="heroImageUrl">
   <hero-detail [hero]="currentHero"></hero-detail>
-  <div [ngClass] = "{selected: isSelected}"></div>
+  <div [ngClass]="{special: isSpecial}"></div>
   <!-- #enddocregion property-binding-syntax-1 -->
 </div>
 <br><br>
 
 <!-- #docregion event-binding-syntax-1 -->
-<button (click) = "onSave()">Save</button>
+<button (click)="onSave()">Save</button>
 <hero-detail (deleteRequest)="deleteHero()"></hero-detail>
 <div (myClick)="clicked=$event" clickable>click me</div>
 <!-- #enddocregion event-binding-syntax-1 -->
@@ -176,9 +176,9 @@
 <div>
   Hero Name:
   <!-- #docregion 2-way-binding-syntax-1 -->
-  <input [(ngModel)]="heroName">
+  <input [(ngModel)]="name">
   <!-- #enddocregion 2-way-binding-syntax-1 -->
-  {{heroName}}
+  {{name}}
 </div>
 <br><br>
 
@@ -193,7 +193,7 @@
 <br><br>
 
 <!-- #docregion style-binding-syntax-1 -->
-<button [style.color] = "isSpecial ? 'red' : 'green'">
+<button [style.color]="isSpecial ? 'red' : 'green'">
 <!-- #enddocregion style-binding-syntax-1 -->
 button</button>
 
@@ -349,7 +349,7 @@ button</button>
 <hr><h2 id="style-binding">Style Binding</h2>
 
 <!-- #docregion style-binding-1 -->
-<button [style.color] = "isSpecial ? 'red': 'green'">Red</button>
+<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
 <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
 <!-- #enddocregion style-binding-1 -->
 
@@ -402,14 +402,14 @@ button</button>
 <!-- #docregion event-binding-no-propagation -->
 <!-- Will save only once -->
 <div (click)="onSave()" clickable>
-  <button (click)="onSave()">Save, no propagation</button>
+  <button (click)="onSave($event)">Save, no propagation</button>
 </div>
 <!-- #enddocregion event-binding-no-propagation -->
 
 <!-- #docregion event-binding-propagation -->
 <!-- Will save twice -->
 <div (click)="onSave()" clickable>
-  <button (click)="onSave() || true">Save w/ propagation</button>
+  <button (click)="onSave()">Save w/ propagation</button>
 </div>
 <!-- #enddocregion event-binding-propagation -->
 
@@ -460,21 +460,21 @@ bindon-ngModel
   [ngModel]="currentHero.name"
   (ngModelChange)="currentHero.name=$event">
 <!-- #enddocregion NgModel-3 -->
-(ngModelChange) = "...name=$event"
+(ngModelChange)="...name=$event"
 <br>
 <!-- #docregion NgModel-4 -->
 <input
   [ngModel]="currentHero.name"
   (ngModelChange)="setUppercaseName($event)">
 <!-- #enddocregion NgModel-4 -->
-(ngModelChange) = "setUppercaseName($event)"
+(ngModelChange)="setUppercaseName($event)"
 
 <a class="to-toc" href="#toc">top</a>
 
 <!-- NgClass binding -->
 <hr><h2 id="ngClass">NgClass Binding</h2>
 
-<p>currentClasses returns {{currentClasses | json}}</p>
+<p>currentClasses is {{currentClasses | json}}</p>
 <!-- #docregion NgClass-1 -->
 <div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
 <!-- #enddocregion NgClass-1 -->
@@ -489,7 +489,7 @@ bindon-ngModel
 <div [ngClass]="currentClasses">
   This div should be {{ canSave ? "": "not"}} saveable,
                   {{ isUnchanged ? "unchanged" : "modified" }} and,
-                  {{ isSpecial ? "": "not"}} special after clicking "refresh".</div>
+                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
 <br><br>
 
 <div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
@@ -504,12 +504,12 @@ bindon-ngModel
 
 <!-- #docregion NgStyle-1 -->
 <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
-  This div is x-large.
+  This div is x-large or smaller.
 </div>
 <!-- #enddocregion NgStyle-1 -->
 
-<h3>[ngStyle] binding to `currentStyles` - CSS property names</h3>
-<p>currentStyles returns {{currentStyles | json}}</p>
+<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
+<p>currentStyles is {{currentStyles | json}}</p>
 <!-- #docregion NgStyle-2 -->
 <div [ngStyle]="currentStyles">
   This div is initially italic, normal weight, and extra large (24px).
@@ -526,7 +526,7 @@ bindon-ngModel
 <div [ngStyle]="currentStyles">
   This div should be {{ canSave ? "italic": "plain"}},
                   {{ isUnchanged ? "normal weight" : "bold" }} and,
-                  {{ isSpecial ? "extra large": "normal size"}} after clicking "refresh".</div>
+                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -655,14 +655,12 @@ bindon-ngModel
 <!-- NgSwitch binding -->
 <hr><h2 id="ngSwitch">NgSwitch Binding</h2>
 
-<div>Pick your favorite hero</div>
-<p>
-  <ng-container *ngFor="let h of heroes">
-    <label>
-      <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
-    </label>
-  </ng-container>
-</p>
+<p>Pick your favorite hero</p>
+<div>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
+  </label>
+</div>
 
 <!-- #docregion NgSwitch -->
 <div [ngSwitch]="currentHero.emotion">

aio/content/examples/template-syntax/src/app/app.component.ts

@@ -5,18 +5,12 @@ import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren }
 
 import { Hero } from './hero';
 
-// Alerter fn: monkey patch during test
-export function alerter(msg?: string) {
-  window.alert(msg);
-}
-
 export enum Color {Red, Green, Blue};
 
 /**
  * Giant grab bag of stuff to drive the chapter
  */
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
@@ -31,20 +25,21 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   ngAfterViewInit() {
     // Detect effects of NgForTrackBy
-    trackChanges(this.heroesNoTrackBy,   () => this.heroesNoTrackByCount += 1);
-    trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount += 1);
+    trackChanges(this.heroesNoTrackBy,   () => this.heroesNoTrackByCount++);
+    trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++);
   }
 
   @ViewChildren('noTrackBy')   heroesNoTrackBy:   QueryList<ElementRef>;
   @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>;
 
   actionName = 'Go for it';
-  alert = alerter;
   badCurly = 'bad curly';
   classes = 'special';
+  help = '';
 
-  callFax(value: string)   {this.alert(`Faxing ${value} ...`); }
-  callPhone(value: string) {this.alert(`Calling ${value} ...`); }
+  alert(msg?: string)      { window.alert(msg); }
+  callFax(value: string)   { this.alert(`Faxing ${value} ...`); }
+  callPhone(value: string) { this.alert(`Calling ${value} ...`); }
   canSave =  true;
 
   changeIds() {
@@ -83,17 +78,9 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   title = 'Template Syntax';
 
-  getStyles(el: Element) {
-    let styles = window.getComputedStyle(el);
-    let showStyles = {};
-    for (let p in this.currentStyles) { // only interested in these styles
-      showStyles[p] = styles[p];
-    }
-    return JSON.stringify(showStyles);
-  }
-
-  getVal() { return this.val; }
+  getVal(): number { return 2; }
 
+  name: string = Hero.heroes[0].name;
   hero: Hero; // defined to demonstrate template context precedence
   heroes: Hero[];
 
@@ -107,18 +94,16 @@ export class AppComponent implements AfterViewInit, OnInit {
   // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
   // Public Domain terms of use: http://www.wpclipart.com/terms.html
   heroImageUrl = 'images/hero.png';
+  // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
+  // Public Domain terms of use http://www.clker.com/disclaimer.html
+  villainImageUrl = 'images/villain.png';
 
   iconUrl = 'images/ng-logo.png';
   isActive = false;
   isSpecial = true;
   isUnchanged = true;
 
-  nullHero: Hero = null;
-
-  onCancel(event: KeyboardEvent) {
-    let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerHTML : '';
-    this.alert('Canceled.' + evtMsg);
-  }
+  get nullHero(): Hero { return null; }
 
   onClickMe(event: KeyboardEvent) {
     let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className  : '';
@@ -128,9 +113,10 @@ export class AppComponent implements AfterViewInit, OnInit {
   onSave(event: KeyboardEvent) {
     let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerText : '';
     this.alert('Saved.' + evtMsg);
+    if (event) { event.stopPropagation(); }
   }
 
-  onSubmit() { /* referenced but not used */}
+  onSubmit() {/* referenced but not used */}
 
   product = {
     name: 'frimfram',
@@ -144,17 +130,6 @@ export class AppComponent implements AfterViewInit, OnInit {
     this.heroesWithTrackByCountReset = 0;
   }
 
-  private samenessCount = 5;
-  moreOfTheSame() { this.samenessCount++; };
-  get sameAsItEverWas() {
-    let result: string[] = Array(this.samenessCount);
-    for ( let i = result.length; i-- > 0; ) { result[i] = 'same as it ever was ...'; }
-    return result;
-    // return [1,2,3,4,5].map(id => {
-    //   return {id:id, text: 'same as it ever was ...'};
-    // });
-  }
-
   setUppercaseName(name: string) {
     this.currentHero.name = name.toUpperCase();
   }
@@ -174,8 +149,8 @@ export class AppComponent implements AfterViewInit, OnInit {
   // #docregion setStyles
   currentStyles: {};
   setCurrentStyles() {
+    // CSS styles: set per current state of component properties
     this.currentStyles = {
-      // CSS styles: set per current state of component properties
       'font-style':  this.canSave      ? 'italic' : 'normal',
       'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
       'font-size':   this.isSpecial    ? '24px'   : '12px'
@@ -190,11 +165,6 @@ export class AppComponent implements AfterViewInit, OnInit {
   // #docregion trackById
   trackById(index: number, item: any): number { return item['id']; }
   // #enddocregion trackById
-
-  val = 2;
-  // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
-  // Public Domain terms of use http://www.clker.com/disclaimer.html
-  villainImageUrl = 'images/villain.png';
 }
 
 // helper to track changes to viewChildren

aio/content/examples/template-syntax/src/app/hero-detail.component.ts

@@ -12,7 +12,7 @@ import { Hero } from './hero';
   inputs: ['hero'],
   outputs: ['deleteRequest'],
   // #enddocregion input-output-2
-  styles: ['button { margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
+  styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
   // #docregion template-1
   template: `
   <div>
@@ -34,7 +34,7 @@ export class HeroDetailComponent {
   lineThrough = '';
   @Input() prefix = '';
 
-// #docregion deleteRequest
+  // #docregion deleteRequest
   // This component make a request but it can't actually delete a hero.
   deleteRequest = new EventEmitter<Hero>();
 
@@ -44,7 +44,7 @@ export class HeroDetailComponent {
     this.lineThrough = this.lineThrough ? '' : 'line-through';
     // #docregion deleteRequest
   }
-// #enddocregion deleteRequest
+  // #enddocregion deleteRequest
 }
 
 @Component({

aio/content/examples/template-syntax/src/app/hero-form.component.html

@@ -1,4 +1,4 @@
-<div id=heroForm>
+<div id="heroForm">
   <!-- #docregion -->
   <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
     <div class="form-group">
@@ -10,7 +10,6 @@
   </form>
   <div [hidden]="!heroForm.form.valid">
     {{submitMessage}}
-  <div>
+  </div>
   <!-- #enddocregion -->
 </div>
-

aio/content/examples/template-syntax/src/app/hero-form.component.ts

@@ -4,7 +4,6 @@ import { NgForm }                      from '@angular/forms';
 import { Hero } from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-form',
   templateUrl: './hero-form.component.html',
   styles: [`

aio/content/examples/template-syntax/src/app/hero.ts

@@ -1,13 +1,14 @@
 export class Hero {
-  static nextId = 1;
+  static nextId = 0;
 
   static heroes: Hero[] = [
     new Hero(
-      325,
+      null,
       'Hercules',
       'happy',
       new Date(1970, 1, 25),
-      'http://www.imdb.com/title/tt0065832/'
+      'http://www.imdb.com/title/tt0065832/',
+      325
     ),
     new Hero(1, 'Mr. Nice',  'happy'),
     new Hero(2, 'Narco',     'sad' ),

aio/content/examples/template-syntax/ts/src/template-syntax.css

@@ -1,13 +0,0 @@
-fieldset {border-style:none}
-img {height: 100px;}
-.box {border: 1px solid black; padding:3px}
-.child-div {margin-left: 1em; font-weight: normal}
-.hidden {display: none}
-.parent-div {margin-top: 1em; font-weight: bold}
-.special {font-weight:bold; font-size: x-large}
-.bad {color: red;}
-.saveable {color: limegreen;}
-.curly, .modified {font-family: "Brush Script MT"}
-.toe {margin-left: 1em; font-style: italic;}
-little-hero {color:blue; font-size: smaller; background-color: Turquoise }
-.to-toc {margin-top: 10px; display: block}