[WIP] docs: use let in all ngFor and replace var- w/ ref-

public/docs/_examples/architecture/dart/lib/hero_list_component.html

@@ -1,7 +1,7 @@
 <!-- #docregion -->
 <h2>Hero List</h2>
 
-<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
+<div *ngFor="let hero of heroes" (click)="selectHero(hero)">
   {{hero.name}}
 </div>
 

public/docs/_examples/architecture/dart/lib/hero_list_component_1.html

@@ -5,6 +5,6 @@
 <!--#enddocregion binding -->
 
 <!--#docregion structural  -->
-<div *ngFor="#hero of heroes" ...>...</div>
+<div *ngFor="let hero of heroes" ...>...</div>
 <hero-detail *ngIf="selectedHero != null" ...></hero-detail>
 <!--#enddocregion structural -->

public/docs/_examples/architecture/ts/app/hero-list.component.1.html

@@ -6,7 +6,7 @@
 <!--#enddocregion binding -->
 
 <!--#docregion structural  -->
-<div *ngFor="#hero of heroes"></div>
+<div *ngFor="let hero of heroes"></div>
 <hero-detail *ngIf="selectedHero"></hero-detail>
 
 <!--#enddocregion structural -->

public/docs/_examples/architecture/ts/app/hero-list.component.html

@@ -2,7 +2,7 @@
 <h2>Hero List</h2>
 
 <p><i>Pick a hero from the list</i></p>
-<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
+<div *ngFor="let hero of heroes" (click)="selectHero(hero)">
   {{hero.name}}
 </div>
 

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html

@@ -75,7 +75,7 @@ <h3>Movie as JSON</h3>
 <h3>Movie Titles via local variable</h3>
 <table>
 <!-- #docregion local -->
-<tr *ngFor="#movie of movies">
+<tr *ngFor="let movie of movies">
   <td>{{movie.title}}</td>
 </tr>
 <!-- #enddocregion local -->
@@ -84,7 +84,7 @@ <h3>Movie Titles via local variable</h3>
 <h3>Sliced Movies with pipes</h3>
 <table>
 <!-- #docregion slice -->
-<tr *ngFor="#movie of movies | slice:0:2">
+<tr *ngFor="let movie of movies | slice:0:2">
 <!-- #enddocregion slice -->
 
   <!-- #docregion uppercase -->

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts

@@ -5,7 +5,7 @@ import {DatePipe} from 'angular2/common';
 // #docregion date-pipe
 @Pipe({name: 'date', pure: true})
 export class StringSafeDatePipe extends DatePipe {
- transform(value: any, args: any[]): string {
+ transform(value: any, args: string): string {
    value = typeof value === 'string' ?
            Date.parse(value) : value
    return super.transform(value, args);

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html

@@ -54,7 +54,7 @@ <h3 [hidden]="!favoriteHero">
     </thead>
     <tbody>
   <!-- #docregion ngFor -->
-      <tr *ngFor="#movie of movies">
+      <tr *ngFor="let movie of movies">
   <!-- #enddocregion ngFor -->
         <td>
           <img [hidden]="!showImage || !movie.imageurl"

public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts

@@ -7,7 +7,7 @@ import {HEROES} from './hero';
   selector: 'hero-parent',
   template: `
     <h2>{{master}} controls {{heroes.length}} heroes</h2>
-    <hero-child *ngFor="#hero of heroes"
+    <hero-child *ngFor="let hero of heroes"
       [hero]="hero"
       [master]="master">
     </hero-child>

public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts

@@ -8,12 +8,12 @@ import {MissionService}     from './mission.service';
   template: `
     <h2>Mission Control</h2>
     <button (click)="announce()">Announce mission</button>
-    <my-astronaut *ngFor="#astronaut of astronauts"
+    <my-astronaut *ngFor="let astronaut of astronauts"
       [astronaut]="astronaut">
     </my-astronaut>
     <h3>History</h3>
     <ul>
-      <li *ngFor="#event of history">{{event}}</li>
+      <li *ngFor="let event of history">{{event}}</li>
     </ul>
   `,
   directives: [AstronautComponent],

public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts

@@ -6,7 +6,7 @@ import {NameChildComponent} from './name-child.component';
   selector: 'name-parent',
   template: `
     <h2>Master controls {{names.length}} names</h2>
-    <name-child *ngFor="#name of names"
+    <name-child *ngFor="let name of names"
       [name]="name">
     </name-child>
   `,

public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts

@@ -1,3 +1,4 @@
+/* tslint:disable:forin */
 // #docregion
 import {Component, Input, OnChanges, SimpleChange} from 'angular2/core';
 
@@ -7,7 +8,7 @@ import {Component, Input, OnChanges, SimpleChange} from 'angular2/core';
     <h3>Version {{major}}.{{minor}}</h3>
     <h4>Change log:</h4>
     <ul>
-      <li *ngFor="#change of changeLog">{{change}}</li>
+      <li *ngFor="let change of changeLog">{{change}}</li>
     </ul>
   `
 })
@@ -27,4 +28,4 @@ export class VersionChildComponent implements OnChanges {
     this.changeLog.push(log.join(', '));
   }
 }
-// #enddocregion
+// #enddocregion

public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts

@@ -7,7 +7,7 @@ import {VoterComponent} from './voter.component';
   template: `
     <h2>Should mankind colonize the Universe?</h2>
     <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
-    <my-voter *ngFor="#voter of voters"
+    <my-voter *ngFor="let voter of voters"
       [name]="voter"
       (onVoted)="onVoted($event)">
     </my-voter>
@@ -23,4 +23,4 @@ export class VoteTakerComponent {
     agreed ? this.agreed++ : this.disagreed++;
   }
 }
-// #enddocregion
+// #enddocregion

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts

@@ -30,7 +30,7 @@ const template = `
 
   <p>Logs:</p>
   <div id="logs">
-    <div *ngFor="#log of logs">{{log}}</div>
+    <div *ngFor="let log of logs">{{log}}</div>
   </div>
   `;
 

public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts

@@ -8,7 +8,7 @@ import {HeroService}       from './hero.service';
 // #docregion heroes-base, injection
 @Component({
   selector: 'unsorted-heroes',
-  template: `<div *ngFor="#hero of heroes">{{hero.name}}</div>`,
+  template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
   providers: [HeroService]
 })
 export class HeroesBaseComponent implements OnInit {
@@ -33,7 +33,7 @@ export class HeroesBaseComponent implements OnInit {
 // #docregion sorted-heroes
 @Component({
   selector: 'sorted-heroes',
-  template: `<div *ngFor="#hero of heroes">{{hero.name}}</div>`,
+  template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
   providers: [HeroService]
 })
 export class SortedHeroesComponent extends HeroesBaseComponent {

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.html

@@ -8,7 +8,7 @@
             [id]="question.key" [type]="question.type">
 
     <select [id]="question.key" *ngSwitchWhen="'dropdown'" [ngControl]="question.key">
-      <option *ngFor="#opt of question.options" [value]="opt.key">{{opt.value}}</option>
+      <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
     </select>
 
   </div>

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.html

@@ -2,7 +2,7 @@
 <div>
   <form (ngSubmit)="onSubmit()" [ngFormModel]="form">
 
-    <div *ngFor="#question of questions" class="form-row">
+    <div *ngFor="let question of questions" class="form-row">
       <df-question [question]="question" [form]="form"></df-question>
     </div>
 

public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts

@@ -48,7 +48,7 @@ class HeroComponent {
 @Component({
   selector: 'heroes-queries',
   template: `
-    <hero *ngFor="#hero of heroData"
+    <hero *ngFor="let hero of heroData"
           [hero]="hero">
       <active-label></active-label>
     </hero>

public/docs/_examples/component-styles/ts/app/hero-team.component.ts

@@ -8,7 +8,7 @@ import {Hero} from './hero';
     <link rel="stylesheet" href="app/hero-team.component.css">
     <h3>Team</h3>
     <ul>
-      <li *ngFor="#member of hero.team">
+      <li *ngFor="let member of hero.team">
         {{member}}
       </li>
     </ul>`

public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.1.ts

@@ -1,12 +1,11 @@
 // #docregion
 import { Component }   from 'angular2/core';
-import { Hero }        from './hero';
 import { HEROES }      from './mock-heroes';
 
 @Component({
   selector: 'hero-list',
   template: `
-  <div *ngFor="#hero of heroes">
+  <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}
   </div>
   `,

public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts

@@ -6,17 +6,17 @@ import { HeroService } from './hero.service';
 @Component({
   selector: 'hero-list',
   template: `
-  <div *ngFor="#hero of heroes">
+  <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}
   </div>
   `,
 })
 export class HeroListComponent {
   heroes: Hero[];
 
-  //#docregion ctor
+  // #docregion ctor
   constructor(heroService: HeroService) {
     this.heroes = heroService.getHeroes();
   }
-  //#enddocregion ctor
+  // #enddocregion ctor
 }

public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts

@@ -6,7 +6,7 @@ import { HeroService } from './hero.service';
 @Component({
   selector: 'hero-list',
   template: `
-  <div *ngFor="#hero of heroes">
+  <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}
     ({{hero.isSecret ? 'secret' : 'public'}})
   </div>
@@ -15,9 +15,9 @@ import { HeroService } from './hero.service';
 export class HeroListComponent {
   heroes: Hero[];
 
-  //#docregion ctor-signature
+  // #docregion ctor-signature
   constructor(heroService: HeroService) {
-  //#enddocregion ctor-signature
+  // #enddocregion ctor-signature
     this.heroes = heroService.getHeroes();
   }
 }

public/docs/_examples/displaying-data/ts/app/app.component.2.ts

@@ -10,7 +10,7 @@ import {Component} from 'angular2/core';
     <p>Heroes:</p>
     <ul>
   // #docregion li-repeater
-      <li *ngFor="#hero of heroes">
+      <li *ngFor="let hero of heroes">
         {{ hero }}
       </li>
   // #enddocregion li-repeater

public/docs/_examples/displaying-data/ts/app/app.component.3.ts

@@ -12,7 +12,7 @@ import {Hero} from './hero';
     <h2>My favorite hero is: {{myHero.name}}</h2>
     <p>Heroes:</p>
     <ul>
-      <li *ngFor="#hero of heroes">
+      <li *ngFor="let hero of heroes">
         {{ hero.name }}
       </li>
     </ul>

public/docs/_examples/displaying-data/ts/app/app.component.ts

@@ -12,7 +12,7 @@ import {Hero} from './hero';
   <h2>My favorite hero is: {{myHero.name}}</h2>
   <p>Heroes:</p>
   <ul>
-    <li *ngFor="#hero of heroes">
+    <li *ngFor="let hero of heroes">
       {{ hero.name }}
       </li>
   </ul>

public/docs/_examples/forms/dart/lib/hero_form_component.html

@@ -32,7 +32,7 @@ <h1>Hero Form</h1>
         <select class="form-control" required
                 [(ngModel)]="model.power"
                 ngControl="power" >
-          <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
       </div>
 

public/docs/_examples/forms/dart/lib/hero_form_component_ngcontrol.html

@@ -23,7 +23,7 @@ <h1>Hero Form</h1>
       <select class="form-control" required
               [(ngModel)]="model.power"
               ngControl="power" >
-        <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+        <option *ngFor="let p of powers" [value]="p">{{p}}</option>
       </select>
     </div>
 

public/docs/_examples/forms/dart/lib/hero_form_component_ngmodel2.html

@@ -20,7 +20,7 @@ <h1>Hero Form</h1>
       <label for="power">Hero Power</label>
       <select class="form-control" required
               [(ngModel)]="model.power">
-        <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+        <option *ngFor="let p of powers" [value]="p">{{p}}</option>
       </select>
     </div>
 	  <!-- #enddocregion ngModel-2 -->

public/docs/_examples/forms/dart/lib/hero_form_component_ngmodel_ngfor.html

@@ -20,7 +20,7 @@ <h1>Hero Form</h1>
     <div class="form-group">
       <label for="power">Hero Power</label>
       <select class="form-control" required>
-        <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+        <option *ngFor="let p of powers" [value]="p">{{p}}</option>
       </select>
     </div>
 	  <!-- #enddocregion powers -->

public/docs/_examples/forms/dart/lib/hero_form_component_ngmodelchange.html

@@ -22,7 +22,7 @@ <h1>Hero Form</h1>
       <label for="power">Hero Power</label>
       <select class="form-control" required
               [(ngModel)]="model.power">
-        <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+        <option *ngFor="let p of powers" [value]="p">{{p}}</option>
       </select>
     </div>
 

public/docs/_examples/forms/dart/lib/hero_form_component_spy.html

@@ -24,7 +24,7 @@ <h1>Hero Form</h1>
       <select class="form-control" required
               [(ngModel)]="model.power"
               ngControl="power" >
-        <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+        <option *ngFor="let p of powers" [value]="p">{{p}}</option>
       </select>
     </div>
 

public/docs/_examples/forms/js/app/hero-form.component.html

@@ -32,7 +32,7 @@ <h1>Hero Form</h1>
        <select class="form-control" required
          [(ngModel)]="model.power"
            ngControl="power" #power="ngForm" >
-         <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+         <option *ngFor="let p of powers" [value]="p">{{p}}</option>
        </select>
        <div [hidden]="power.valid" class="alert alert-danger">
          Power is required
@@ -110,7 +110,7 @@ <h1>Hero Form</h1>
        <div class="form-group">
          <label for="power">Hero Power</label>
          <select class="form-control" required>
-           <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
          </select>
        </div>
 
@@ -146,7 +146,7 @@ <h1>Hero Form</h1>
          <label for="power">Hero Power</label>
          <select class="form-control"  required
            [(ngModel)]="model.power" >
-           <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
          </select>
        </div>
 

public/docs/_examples/forms/ts/app/hero-form.component.html

@@ -34,7 +34,7 @@ <h1>Hero Form</h1>
         <select class="form-control" required
           [(ngModel)]="model.power"
             ngControl="power" #power="ngForm" >
-          <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
         <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
           Power is required
@@ -124,7 +124,7 @@ <h1>Hero Form</h1>
         <div class="form-group">
           <label for="power">Hero Power</label>
           <select class="form-control" required>
-            <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+            <option *ngFor="let p of powers" [value]="p">{{p}}</option>
           </select>
         </div>
 
@@ -161,7 +161,7 @@ <h1>Hero Form</h1>
           <label for="power">Hero Power</label>
           <select class="form-control"  required
             [(ngModel)]="model.power" >
-            <option *ngFor="#p of powers" [value]="p">{{p}}</option>
+            <option *ngFor="let p of powers" [value]="p">{{p}}</option>
           </select>
         </div>