chore: update to beta.17

closes #1213, 1205

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 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>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 @@
     </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>
   `
 })

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>

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,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}}
   </div>
   `,
@@ -14,9 +14,9 @@ import { HeroService } from './hero.service';
 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 @@
         <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 @@
       <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 @@
       <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 @@
     <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 @@
       <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 @@
       <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 @@
        <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 @@
        <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 @@
          <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 @@
         <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 @@
         <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 @@
           <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/hierarchical-dependency-injection/ts/app/heroes-list.component.ts

@@ -11,7 +11,7 @@ import {Hero} from './hero';
   template: `
     <div>
       <ul>
-        <li *ngFor="#editItem of heroes">
+        <li *ngFor="let editItem of heroes">
           <hero-card
             [hidden]="editItem.editing"
             [hero]="editItem.item">

public/docs/_examples/homepage-hello-world/ts/index.1.html

@@ -14,9 +14,9 @@
 
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.16/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>

public/docs/_examples/homepage-tabs/ts/app/di_demo.ts

@@ -15,7 +15,7 @@ class Detail {
       <template ui-pane title='Overview' active="true">
         You have {{details.length}} details.
       </template>
-      <template *ngFor="#detail of details" ui-pane [title]="detail.title">
+      <template *ngFor="let detail of details" ui-pane [title]="detail.title">
         {{detail.text}} <br><br>
         <button class="btn" (click)="removeDetail(detail)">Remove</button>
       </template>

public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts

@@ -31,7 +31,7 @@ export class UiPane {
   selector: 'ui-tabs',
   template: `
     <ul class="nav nav-tabs">
-      <li *ngFor="var pane of panes"
+      <li *ngFor="let pane of panes"
           (click)="select(pane)"
           role="presentation" [class.active]="pane.active">
         <a>{{pane.title}}</a>

public/docs/_examples/homepage-tabs/ts/index.1.html

@@ -15,9 +15,9 @@
 
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.16/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>

public/docs/_examples/homepage-todo/ts/app/todo_list.ts

@@ -12,7 +12,7 @@ import {Todo} from './todo';
   ],
   template: `
     <ul class="list-unstyled">
-      <li *ngFor="#todo of todos">
+      <li *ngFor="let todo of todos">
         <input type="checkbox" [(ngModel)]="todo.done">
         <span class="done-{{todo.done}}">{{todo.text}}</span>
       </li>

public/docs/_examples/homepage-todo/ts/index.1.html

@@ -15,9 +15,9 @@
 
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.16/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>

public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts

@@ -95,7 +95,7 @@ export class AfterContentComponent implements  AfterContentChecked, AfterContent
 
     <h4>-- AfterContent Logs --</h4>
     <p><button (click)="reset()">Reset</button></p>
-    <div *ngFor="#msg of logs">{{msg}}</div>
+    <div *ngFor="let msg of logs">{{msg}}</div>
   </div>
   `,
   styles: ['.parent {background: burlywood}'],

public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts

@@ -97,7 +97,7 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
 
     <h4>-- AfterView Logs --</h4>
     <p><button (click)="reset()">Reset</button></p>
-    <div *ngFor="#msg of logs">{{msg}}</div>
+    <div *ngFor="let msg of logs">{{msg}}</div>
   </div>
   `,
   styles: ['.parent {background: burlywood}'],

public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts

@@ -14,7 +14,7 @@ import {LoggerService}  from './logger.service';
     Counter = {{counter}}
 
     <h5>-- Counter Change Log --</h5>
-    <div *ngFor="#chg of changeLog" my-spy>{{chg}}</div>
+    <div *ngFor="let chg of changeLog" my-spy>{{chg}}</div>
   </div>
   `,
   styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}'],
@@ -55,7 +55,7 @@ export class MyCounter implements OnChanges {
     <my-counter [counter]="value"></my-counter>
 
     <h4>-- Spy Lifecycle Hook Log --</h4>
-    <div *ngFor="#msg of spyLog">{{msg}}</div>
+    <div *ngFor="let msg of spyLog">{{msg}}</div>
    </div>
   `,
   styles: ['.parent {background: gold;}'],

public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts

@@ -12,7 +12,7 @@ class Hero {
     <p>{{hero.name}} can {{power}}</p>
 
     <h4>-- Change Log --</h4>
-    <div *ngFor="#chg of changeLog">{{chg}}</div>
+    <div *ngFor="let chg of changeLog">{{chg}}</div>
   </div>
   `,
   styles: [

public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts

@@ -17,7 +17,7 @@ class Hero {
     <p>{{hero.name}} can {{power}}</p>
 
     <h4>-- Change Log --</h4>
-    <div *ngFor="#chg of changeLog">{{chg}}</div>
+    <div *ngFor="let chg of changeLog">{{chg}}</div>
   </div>
   `,
   styles: [

public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts

@@ -18,7 +18,7 @@ import {LoggerService}  from './logger.service';
     </peek-a-boo>
 
     <h4>-- Lifecycle Hook Log --</h4>
-    <div *ngFor="#msg of hookLog">{{msg}}</div>
+    <div *ngFor="let msg of hookLog">{{msg}}</div>
   </div>
   `,
   styles: ['.parent {background: moccasin}'],

public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts

@@ -16,12 +16,12 @@ import {Spy} from './spy.directive';
       <button (click)="reset()">Reset Heroes</button>
     </p>` +
 // #docregion template
-    `<div *ngFor="#hero of heroes"  my-spy  class="heroes">
+    `<div *ngFor="let hero of heroes"  my-spy  class="heroes">
        {{hero}}
      </div>`
 // #enddocregion template
 + `<h4>-- Spy Lifecycle Hook Log --</h4>
-    <div *ngFor="#msg of spyLog">{{msg}}</div>
+    <div *ngFor="let msg of spyLog">{{msg}}</div>
    </div>
   `,
   styles: [

public/docs/_examples/package.json

@@ -19,14 +19,14 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.16",
+    "angular2": "2.0.0-beta.17",
     "systemjs": "0.19.26",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
+    "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
 
-    "a2-in-memory-web-api": "^0.1.16",
+    "a2-in-memory-web-api": "^0.1.17",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {

public/docs/_examples/pipes/ts/app/flying-heroes.component.html

@@ -20,7 +20,7 @@ New hero:
 <h4>Heroes who fly (piped)</h4>
 <div id="flyers">
 <!-- #docregion template-flying-heroes -->
-  <div *ngFor="#hero of (heroes | flyingHeroes)">
+  <div *ngFor="let hero of (heroes | flyingHeroes)">
     {{hero.name}}
   </div>
 <!-- #enddocregion template-flying-heroes -->
@@ -30,7 +30,7 @@ New hero:
 <div id="all">
 <!-- #docregion template-1 -->
 <!-- #docregion template-all-heroes -->
-  <div *ngFor="#hero of heroes">
+  <div *ngFor="let hero of heroes">
     {{hero.name}}
   </div>
 <!-- #enddocregion template-all-heroes -->

public/docs/_examples/pipes/ts/app/hero-list.component.ts

@@ -8,7 +8,7 @@ import {FetchJsonPipe} from './fetch-json.pipe';
   template: `
     <h2>Heroes from JSON File</h2>
 
-    <div *ngFor="#hero of ('heroes.json' | fetch) ">
+    <div *ngFor="let hero of ('heroes.json' | fetch) ">
       {{hero.name}}
     </div>
 

public/docs/_examples/quickstart/js/package.1.json

@@ -7,10 +7,10 @@
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.16",
+    "angular2": "2.0.0-beta.17",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
+    "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12"
   },
   "devDependencies": {

public/docs/_examples/quickstart/ts/package.1.json

@@ -11,11 +11,11 @@
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.16",
+    "angular2": "2.0.0-beta.17",
     "systemjs": "0.19.26",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
+    "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12"
   },
   "devDependencies": {

public/docs/_examples/quickstart/ts/typings.1.json

@@ -1,6 +1,6 @@
 {
   "ambientDependencies": {
-    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
+    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
-    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
+    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
   }
 }

public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts

@@ -9,7 +9,7 @@ import {Router} from 'angular2/router';
   // #docregion template
   template: `
     <ul class="items">
-      <li *ngFor="#crisis of crises"
+      <li *ngFor="let crisis of crises"
         (click)="onSelect(crisis)">
         <span class="badge">{{crisis.id}}</span> {{crisis.name}}
       </li>

public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts

@@ -8,7 +8,7 @@ import {Router, RouteParams} from 'angular2/router';
 @Component({
   template: `
     <ul class="items">
-      <li *ngFor="#crisis of crises"
+      <li *ngFor="let crisis of crises"
         [class.selected]="isSelected(crisis)"
         (click)="onSelect(crisis)">
         <span class="badge">{{crisis.id}}</span> {{crisis.name}}

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

@@ -11,7 +11,7 @@ import {Router}              from 'angular2/router';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="#hero of heroes"
+      <li *ngFor="let hero of heroes"
         (click)="onSelect(hero)">
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>

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

@@ -13,7 +13,7 @@ import {Router, RouteParams} from 'angular2/router';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="#hero of heroes"
+      <li *ngFor="let hero of heroes"
         [class.selected]="isSelected(hero)"
         (click)="onSelect(hero)">
         <span class="badge">{{hero.id}}</span> {{hero.name}}

public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html

@@ -1,7 +1,7 @@
 <!-- #docregion -->
 <h3>Heroes:</h3>
 <ul>
-  <li *ngFor="#hero of heroes">
+  <li *ngFor="let hero of heroes">
     {{ hero.name }}
   </li>
 </ul>

public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts

@@ -17,7 +17,7 @@ import {WikipediaService} from './wikipedia.service';
     <input #term (keyup)="search(term.value)"/>
 
     <ul>
-      <li *ngFor="#item of items | async">{{item}}</li>
+      <li *ngFor="let item of items | async">{{item}}</li>
     </ul>
   `,
   providers:[JSONP_PROVIDERS, WikipediaService]

public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts

@@ -14,7 +14,7 @@ import {WikipediaService} from './wikipedia.service';
     <input #term (keyup)="search(term.value)"/>
     
     <ul>
-      <li *ngFor="#item of items | async">{{item}}</li>
+      <li *ngFor="let item of items | async">{{item}}</li>
     </ul>
   `,
   providers:[JSONP_PROVIDERS, WikipediaService]

public/docs/_examples/structural-directives/dart/lib/structural_directives_component.html

@@ -5,7 +5,7 @@
 <!-- #docregion structural-directives -->
 <!-- #docregion asterisk -->
 <div *ngIf="hero != null">{{hero}}</div>
-<div *ngFor="#hero of heroes">{{hero}}</div>
+<div *ngFor="let hero of heroes">{{hero}}</div>
 <!-- #enddocregion asterisk -->
 <!-- #docregion ngSwitch -->
 <div [ngSwitch]="status">
@@ -57,7 +57,7 @@
 </div>
 
 <h4>heavy-loader log:</h4>
-<div *ngFor="#message of logs">{{message}}</div>
+<div *ngFor="let message of logs">{{message}}</div>
 <!-- #enddocregion message-log -->
 
 <hr>
@@ -99,10 +99,10 @@
 <!-- Examples (A) and (B) are the same -->
 
 <!-- (A) *ngFor div -->
-<div *ngFor="#hero of heroes">{{ hero }}</div>
+<div *ngFor="let hero of heroes">{{ hero }}</div>
 
 <!-- (B) ngFor with template -->
-<template ngFor #hero [ngForOf]="heroes">
+<template ngFor let-hero [ngForOf]="heroes">
   <div>{{ hero }}</div>
 </template>
 <!-- #enddocregion ngFor-template -->

public/docs/_examples/structural-directives/ts/app/structural-directives.component.html

@@ -5,7 +5,7 @@
 <!-- #docregion structural-directives -->
 <!-- #docregion asterisk -->
 <div *ngIf="hero">{{hero}}</div>
-<div *ngFor="#hero of heroes">{{hero}}</div>
+<div *ngFor="let hero of heroes">{{hero}}</div>
 <!-- #enddocregion asterisk -->
 <!-- #docregion ngSwitch -->
 <div [ngSwitch]="status">
@@ -57,7 +57,7 @@
 </div>
 
 <h4>heavy-loader log:</h4>
-<div *ngFor="#message of logs">{{message}}</div>
+<div *ngFor="let message of logs">{{message}}</div>
 <!-- #enddocregion message-log -->
 
 <hr>
@@ -99,10 +99,10 @@
 <!-- Examples (A) and (B) are the same -->
 
 <!-- (A) *ngFor div -->
-<div *ngFor="#hero of heroes">{{ hero }}</div>
+<div *ngFor="let hero of heroes">{{ hero }}</div>
 
 <!-- (B) ngFor with template -->
-<template ngFor #hero [ngForOf]="heroes">
+<template ngFor let-hero [ngForOf]="heroes">
   <div>{{ hero }}</div>
 </template>
 <!-- #enddocregion ngFor-template -->

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts

@@ -7,7 +7,7 @@
     <div>
       <h2>My Heroes</h2>
       <ul class="heroes">
-        <li *ngFor="#hero of heroes">
+        <li *ngFor="let hero of heroes">
           <span class="badge">{{hero.id}}</span> {{hero.name}}
         </li>
       </ul>

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html

@@ -2,7 +2,7 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="#hero of heroes">
+    <li *ngFor="let hero of heroes">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </li>
   </ul>

public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.avoid.ts

@@ -6,7 +6,7 @@
   template: `
     <section>
       Our list of heroes:
-      <hero-profile *ngFor="#hero of heroes" [hero]="hero">
+      <hero-profile *ngFor="let hero of heroes" [hero]="hero">
       </hero-profile>
       Total powers: {{totalPowers}}<br>
       Average power: {{totalPowers / heroes.length}}

public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.ts

@@ -9,7 +9,7 @@ import { Hero } from './hero.model.ts';
   template: `
     <section>
       Our list of heroes:
-      <hero-profile *ngFor="#hero of heroes" [hero]="hero">
+      <hero-profile *ngFor="let hero of heroes" [hero]="hero">
       </hero-profile>
       Total powers: {{totalPowers}}<br>
       Average power: {{avgPower}}

public/docs/_examples/template-syntax/dart/lib/app_component.html

@@ -523,7 +523,7 @@ bindon-ngModel
 
 <div class="box">
   <!-- #docregion NgFor-1 -->
-  <div *ngFor="#hero of heroes">{{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes">{{hero.fullName}}</div>
   <!-- #enddocregion NgFor-1 -->
 </div>
 <br>
@@ -531,7 +531,7 @@ bindon-ngModel
 <div class="box">
   <!-- *ngFor w/ hero-detail Component -->
   <!-- #docregion NgFor-2 -->
-  <hero-detail *ngFor="#hero of heroes" [hero]="hero"></hero-detail>
+  <hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>
   <!-- #enddocregion NgFor-2 -->
 </div>
 
@@ -541,14 +541,14 @@ bindon-ngModel
 <p>with <i>semi-colon</i> separator</p>
 <div class="box">
   <!-- #docregion NgFor-3 -->
-  <div *ngFor="#hero of heroes; #i=index">{{i + 1}} - {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.fullName}}</div>
   <!-- #enddocregion NgFor-3 -->
 </div>
 
 <p>with <i>comma</i> separator</p>
 <div class="box">
   <!-- Ex: "1 - Hercules Son of Zeus"" -->
-  <div *ngFor="#hero of heroes, #i=index">{{i + 1}} - {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.fullName}}</div>
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -560,7 +560,7 @@ bindon-ngModel
 <p><i>without</i> trackBy</p>
 <div #noTrackBy class="box">
   <!-- #docregion NgForTrackBy-1 -->
-  <div *ngFor="#hero of heroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes">({{hero.id}}) {{hero.fullName}}</div>
   <!-- #enddocregion NgForTrackBy-1 -->
 </div>
 <div id="noTrackByCnt" *ngIf="heroesNoTrackByChangeCount != 0" style="background-color:bisque">
@@ -570,7 +570,7 @@ bindon-ngModel
 <p>with trackBy and <i>semi-colon</i> separator</p>
 <div #withTrackBy class="box">
   <!-- #docregion NgForTrackBy-2 -->
-  <div *ngFor="#hero of heroes; trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes; trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
   <!-- #enddocregion NgForTrackBy-2 -->
 </div>
 <div id="withTrackByCnt" *ngIf="heroesWithTrackByChangeCount != 0" style="background-color:bisque">
@@ -579,25 +579,25 @@ bindon-ngModel
 
 <p>with trackBy and <i>comma</i> separator</p>
 <div class="box">
-  <div *ngFor="#hero of heroes, trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes, trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
 </div>
 
 <p>with trackBy and <i>space</i> separator</p>
 <div class="box">
-  <div *ngFor="#hero of heroes trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
 </div>
 
 <p>with <i>*ngForTrackBy</i></p>
 <div class="box">
   <!-- #docregion NgForTrackBy-2 -->
-  <div *ngFor="#hero of heroes" *ngForTrackBy="trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes" *ngForTrackBy="trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
   <!-- #enddocregion NgForTrackBy-2 -->
 </div>
 
 <p>with <i>generic</i> trackById function</p>
 <div class="box">
   <!-- #docregion NgForTrackBy-3 -->
-  <div *ngFor="#hero of heroes" *ngForTrackBy="trackById">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes" *ngForTrackBy="trackById">({{hero.id}}) {{hero.fullName}}</div>
   <!-- #enddocregion NgForTrackBy-3 -->
 </div>
 
@@ -628,14 +628,14 @@ bindon-ngModel
 <p><i>*ngFor</i></p>
   <!-- *ngFor w/ hero-detail Component -->
   <!-- #docregion Template-3a -->
-  <hero-detail *ngFor="#hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
+  <hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
   <!-- #enddocregion Template-3a -->
 
 <p><i>expand to template = "..."</i></p>
 <div class="box">
   <!-- *ngFor w/ hero-detail Component and a template "attribute" directive -->
   <!-- #docregion Template-3 -->
-  <hero-detail template="ngFor #hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
+  <hero-detail template="ngFor let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
   <!-- #enddocregion Template-3 -->
 </div>
 <br>
@@ -644,7 +644,7 @@ bindon-ngModel
 <div class="box">
   <!-- ngFor w/ hero-detail Component inside a template element -->
   <!-- #docregion Template-4 -->
-  <template ngFor #hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes">
+  <template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes">
       <hero-detail [hero]="hero"></hero-detail>
   </template>
   <!-- #enddocregion Template-4 -->

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

@@ -519,7 +519,7 @@ After setClasses(), the classes are "{{classDiv.className}}"
 
 <div class="box">
   <!-- #docregion NgFor-1 -->
-  <div *ngFor="#hero of heroes">{{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes">{{hero.fullName}}</div>
   <!-- #enddocregion NgFor-1 -->
 </div>
 <br>
@@ -527,7 +527,7 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <div class="box">
   <!-- *ngFor w/ hero-detail Component -->
   <!-- #docregion NgFor-2 -->
-  <hero-detail *ngFor="#hero of heroes" [hero]="hero"></hero-detail>
+  <hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>
   <!-- #enddocregion NgFor-2 -->
 </div>
 
@@ -537,14 +537,14 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <p>with <i>semi-colon</i> separator</p>
 <div class="box">
   <!-- #docregion NgFor-3 -->
-  <div *ngFor="#hero of heroes; #i=index">{{i + 1}} - {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.fullName}}</div>
   <!-- #enddocregion NgFor-3 -->
 </div>
 
 <p>with <i>comma</i> separator</p>
 <div class="box">
   <!-- Ex: "1 - Hercules Son of Zeus"" -->
-  <div *ngFor="#hero of heroes, #i=index">{{i + 1}} - {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.fullName}}</div>
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -556,7 +556,7 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <p><i>without</i> trackBy</p>
 <div #noTrackBy class="box">
   <!-- #docregion NgForTrackBy-1 -->
-  <div *ngFor="#hero of heroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes">({{hero.id}}) {{hero.fullName}}</div>
   <!-- #enddocregion NgForTrackBy-1 -->
 </div>
 <div id="noTrackByCnt" *ngIf="heroesNoTrackByChangeCount" style="background-color:bisque">
@@ -566,7 +566,7 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <p>with trackBy and <i>semi-colon</i> separator</p>
 <div #withTrackBy class="box">
   <!-- #docregion NgForTrackBy-2 -->
-  <div *ngFor="#hero of heroes; trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes; trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
   <!-- #enddocregion NgForTrackBy-2 -->
 </div>
 <div id="withTrackByCnt" *ngIf="heroesWithTrackByChangeCount" style="background-color:bisque">
@@ -575,25 +575,25 @@ After setClasses(), the classes are "{{classDiv.className}}"
 
 <p>with trackBy and <i>comma</i> separator</p>
 <div class="box">
-  <div *ngFor="#hero of heroes, trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes, trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
 </div>
 
 <p>with trackBy and <i>space</i> separator</p>
 <div #withTrackBy class="box">
-  <div *ngFor="#hero of heroes trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
 </div>
 
 <p>with <i>*ngForTrackBy</i></p>
 <div class="box">
   <!-- #docregion NgForTrackBy-2 -->
-  <div *ngFor="#hero of heroes" *ngForTrackBy="trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes" *ngForTrackBy="trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
   <!-- #enddocregion NgForTrackBy-2 -->
 </div>
 
 <p>with <i>generic</i> trackById function</p>
 <div class="box">
   <!-- #docregion NgForTrackBy-3 -->
-  <div *ngFor="#hero of heroes" *ngForTrackBy="trackById">({{hero.id}}) {{hero.fullName}}</div>
+  <div *ngFor="let hero of heroes" *ngForTrackBy="trackById">({{hero.id}}) {{hero.fullName}}</div>
   <!-- #enddocregion NgForTrackBy-3 -->
 </div>
 
@@ -624,14 +624,14 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <p><i>*ngFor</i></p>
   <!-- *ngFor w/ hero-detail Component -->
   <!-- #docregion Template-3a -->
-  <hero-detail *ngFor="#hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
+  <hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
   <!-- #enddocregion Template-3a -->
 
 <p><i>expand to template = "..."</i></p>
 <div class="box">
   <!-- ngFor w/ hero-detail Component and a template "attribute" directive -->
   <!-- #docregion Template-3 -->
-  <hero-detail template="ngFor #hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
+  <hero-detail template="ngFor let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
   <!-- #enddocregion Template-3 -->
 </div>
 
@@ -639,7 +639,7 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <div class="box">
   <!-- ngFor w/ hero-detail Component inside a template element -->
   <!-- #docregion Template-4 -->
-  <template ngFor #hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes">
+  <template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes">
     <hero-detail [hero]="hero"></hero-detail>
   </template>
   <!-- #enddocregion Template-4 -->
@@ -650,31 +650,31 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <!-- template local variable -->
 <hr><h2 id="local-vars">Template local variables</h2>
 
-<!-- #docregion var-phone -->
+<!-- #docregion ref-phone -->
 <!-- phone refers to the input element; pass its `value` to an event handler -->
 <input #phone placeholder="phone number">
 <button (click)="callPhone(phone.value)">Call</button>
 
 <!-- fax refers to the input element; pass its `value` to an event handler -->
-<input var-fax placeholder="fax number">
+<input ref-fax placeholder="fax number">
 <button (click)="callFax(fax.value)">Fax</button>
-  <!-- #enddocregion var-phone -->
+  <!-- #enddocregion ref-phone -->
 
 <h4>Example Form</h4>
-<!-- #docregion var-form -->
+<!-- #docregion ref-form -->
-<!-- #docregion var-form-a -->
+<!-- #docregion ref-form-a -->
 <form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
-<!-- #enddocregion var-form-a -->
+<!-- #enddocregion ref-form-a -->
   <div class="form-group">
     <label for="name">Name</label>
     <input class="form-control" required ngControl="firstName"
       [(ngModel)]="currentHero.firstName">
   </div>
-<!-- #docregion var-form-a -->
+<!-- #docregion ref-form-a -->
   <button type="submit" [disabled]="!theForm.form.valid">Submit</button>
 </form>
-<!-- #enddocregion var-form-a -->
+<!-- #enddocregion ref-form-a -->
-<!-- #enddocregion var-form -->
+<!-- #enddocregion ref-form -->
 <br><br>
 
 <!-- btn refers to the button element; show its disabled state -->

public/docs/_examples/testing/ts/app/bag.ts

@@ -160,7 +160,7 @@ export class BadTemplateUrl { }
       <label>Child value: <input [(ngModel)]="childValue"> </label>
     </div>
     <p><i>Change log:</i></p>
-    <div *ngFor="#log of changeLog; #i=index">{{i + 1}} - {{log}}</div>`
+    <div *ngFor="let log of changeLog; let i=index">{{i + 1}} - {{log}}</div>`
 })
 export class MyIfChildComp implements OnInit, OnChanges, OnDestroy {
   @Input() value = '';

public/docs/_examples/testing/ts/app/dashboard.component.html

@@ -2,7 +2,7 @@
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
 <!-- #docregion click -->
-  <div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
 <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>

public/docs/_examples/testing/ts/app/heroes.component.html

@@ -2,7 +2,7 @@
 <!-- #docregion -->
 <h2>My Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="#hero of heroes"
+  <li *ngFor="let hero of heroes"
     [class.selected]="hero === selectedHero"
     (click)="onSelect(hero)">
     <span class="badge">{{hero.id}}</span> {{hero.name}}

public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts

@@ -1,5 +1,5 @@
 // #docregion ng-for
-<li *ngFor="#hero of heroes">
+<li *ngFor="let hero of heroes">
   <span class="badge">{{hero.id}}</span> {{hero.name}}
 </li>
 // #enddocregion ng-for
@@ -7,14 +7,14 @@
 // #docregion heroes-styled
 <h2>My Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="#hero of heroes">
+  <li *ngFor="let hero of heroes">
     <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
 </ul>
 // #enddocregion heroes-styled
 
 // #docregion selectedHero-click
-<li *ngFor="#hero of heroes" (click)="onSelect(hero)">
+<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
   <span class="badge">{{hero.id}}</span> {{hero.name}}
 </li>
 // #enddocregion selectedHero-click
@@ -53,7 +53,7 @@ public heroes = HEROES;
 // #enddocregion heroes-template-1
 
 // #docregion heroes-ngfor-1
-<li *ngFor="#hero of heroes">
+<li *ngFor="let hero of heroes">
 // #enddocregion heroes-ngfor-1
 
 // #docregion class-selected-1
@@ -61,7 +61,7 @@ public heroes = HEROES;
 // #enddocregion class-selected-1
 
 // #docregion class-selected-2
-<li *ngFor="#hero of heroes"
+<li *ngFor="let hero of heroes"
   [class.selected]="hero === selectedHero"
   (click)="onSelect(hero)">
   <span class="badge">{{hero.id}}</span> {{hero.name}}

public/docs/_examples/toh-2/ts/app/app.component.ts

@@ -12,7 +12,7 @@ export class Hero {
     <h1>{{title}}</h1>
     <h2>My Heroes</h2>
     <ul class="heroes">
-      <li *ngFor="#hero of heroes"
+      <li *ngFor="let hero of heroes"
         [class.selected]="hero === selectedHero"
         (click)="onSelect(hero)">
         <span class="badge">{{hero.id}}</span> {{hero.name}}

public/docs/_examples/toh-3/ts/app/app.component.ts

@@ -14,7 +14,7 @@ import {HeroDetailComponent} from './hero-detail.component';
     <h1>{{title}}</h1>
     <h2>My Heroes</h2>
     <ul class="heroes">
-      <li *ngFor="#hero of heroes"
+      <li *ngFor="let hero of heroes"
         [class.selected]="hero === selectedHero"
         (click)="onSelect(hero)">
         <span class="badge">{{hero.id}}</span> {{hero.name}}

public/docs/_examples/toh-4/ts/app/app.component.1.ts

@@ -14,7 +14,7 @@ import {HeroService} from './hero.service.1';
 @Component({
   selector: 'my-app',
   template: `
-  <div *ngFor="#hero of heroes" (click)="onSelect(hero)">
+  <div *ngFor="let hero of heroes" (click)="onSelect(hero)">
     {{hero.name}}
   </div>
   <my-hero-detail [hero]="selectedHero"></my-hero-detail>

public/docs/_examples/toh-4/ts/app/app.component.ts

@@ -14,7 +14,7 @@ import {HeroService} from './hero.service';
     <h1>{{title}}</h1>
     <h2>My Heroes</h2>
     <ul class="heroes">
-      <li *ngFor="#hero of heroes"
+      <li *ngFor="let hero of heroes"
         [class.selected]="hero === selectedHero"
         (click)="onSelect(hero)">
         <span class="badge">{{hero.id}}</span> {{hero.name}}

public/docs/_examples/toh-5/dart/lib/dashboard_component.html

@@ -2,7 +2,7 @@
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
 <!-- #docregion click -->
-  <div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4" >
+  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4" >
 <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>

public/docs/_examples/toh-5/dart/lib/heroes_component.html

@@ -2,7 +2,7 @@
 <!-- #docregion -->
 <h2>My Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="#hero of heroes"
+  <li *ngFor="let hero of heroes"
     [class.selected]="hero === selectedHero"
     (click)="onSelect(hero)">
     <span class="badge">{{hero.id}}</span> {{hero.name}}

public/docs/_examples/toh-5/ts/app/dashboard.component.html

@@ -2,7 +2,7 @@
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
 <!-- #docregion click -->
-  <div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
 <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>

public/docs/_examples/toh-5/ts/app/heroes.component.html

@@ -2,7 +2,7 @@
 <!-- #docregion -->
 <h2>My Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="#hero of heroes"
+  <li *ngFor="let hero of heroes"
     [class.selected]="hero === selectedHero"
     (click)="onSelect(hero)">
     <span class="badge">{{hero.id}}</span> {{hero.name}}

public/docs/_examples/tutorial/ts/app/dashboard.component.html

@@ -1,6 +1,6 @@
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
-  <div *ngFor="#hero of heroes" class="col-1-4" (click)="gotoDetail(hero)">
+  <div *ngFor="let hero of heroes" class="col-1-4" (click)="gotoDetail(hero)">
     <div class="module hero">
       <h4>{{hero.name}}</h4>
     </div>

public/docs/_examples/tutorial/ts/app/heroes.component.html

@@ -1,7 +1,7 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="#hero of heroes"
+    <li *ngFor="let hero of heroes"
       [class.selected]="hero === selectedHero"
       (click)="onSelect(hero)">
       <span class="badge">{{hero.id}}</span> {{hero.name}}

public/docs/_examples/typings.json

@@ -1,6 +1,6 @@
 {
   "ambientDependencies": {
-    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
+    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
-    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
+    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
   }
 }

public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.html

@@ -2,13 +2,13 @@
 <div class="phone-images">
   <img [src]="img"
        class="phone"
-       *ngFor="#img of phone?.images"
+       *ngFor="let img of phone?.images"
        [ngClass]="{active: mainImageUrl==img}">
 </div>
 <h1>{{phone?.name}}</h1>
 <p>{{phone?.description}}</p>
 <ul class="phone-thumbs">
-  <li *ngFor="#img of phone?.images">
+  <li *ngFor="let img of phone?.images">
     <img [src]="img" (click)="setImage(img)">
   </li>
 </ul>
@@ -17,7 +17,7 @@
     <span>Availability and Networks</span>
     <dl>
       <dt>Availability</dt>
-      <dd *ngFor="#availability of phone?.availability">{{availability}}</dd>
+      <dd *ngFor="let availability of phone?.availability">{{availability}}</dd>
     </dl>
   </li>
   <li>
@@ -68,7 +68,7 @@
     <span>Size and Weight</span>
     <dl>
       <dt>Dimensions</dt>
-      <dd *ngFor="#dim of phone?.sizeAndWeight?.dimensions">{{dim}}</dd>
+      <dd *ngFor="let dim of phone?.sizeAndWeight?.dimensions">{{dim}}</dd>
       <dt>Weight</dt>
       <dd>{{phone?.sizeAndWeight?.weight}}</dd>
     </dl>

public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.html

@@ -18,7 +18,7 @@
 
       <!-- #docregion list -->
       <ul class="phones">
-        <li *ngFor="#phone of phones | async | phoneFilter:query | orderBy:orderProp"
+        <li *ngFor="let phone of phones | async | phoneFilter:query | orderBy:orderProp"
             class="thumbnail phone-listing">
           <a href="#/phones/{{phone.id}}" class="thumb"><img [src]="phone.imageUrl"></a>
           <a href="#/phones/{{phone.id}}" class="name">{{phone.name}}</a>

public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_async.html

@@ -18,7 +18,7 @@
 
       <!-- #docregion list -->
       <ul class="phones">
-        <li *ngFor="#phone of phones | phoneFilter:query | orderBy:orderProp"
+        <li *ngFor="let phone of phones | phoneFilter:query | orderBy:orderProp"
             class="thumbnail phone-listing">
           <a href="#/phones/{{phone.id}}" class="thumb"><img [src]="phone.imageUrl"></a>
           <a href="#/phones/{{phone.id}}" class="name">{{phone.name}}</a>

public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.html

@@ -18,7 +18,7 @@
 
       <!-- #docregion list -->
       <ul class="phones">
-        <li *ngFor="#phone of phones | filter:query | orderBy:orderProp"
+        <li *ngFor="let phone of phones | filter:query | orderBy:orderProp"
             class="thumbnail phone-listing">
           <a href="#/phones/{{phone.id}}" class="thumb"><img [src]="phone.imageUrl"></a>
           <a href="#/phones/{{phone.id}}" class="name">{{phone.name}}</a>

public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.html

@@ -2,13 +2,13 @@
 <div class="phone-images">
   <img [src]="img"
        class="phone"
-       *ngFor="#img of phone?.images"
+       *ngFor="let img of phone?.images"
        [ngClass]="{active: mainImageUrl==img}">
 </div>
 <h1>{{phone?.name}}</h1>
 <p>{{phone?.description}}</p>
 <ul class="phone-thumbs">
-  <li *ngFor="#img of phone?.images">
+  <li *ngFor="let img of phone?.images">
     <img [src]="img" (click)="setImage(img)">
   </li>
 </ul>
@@ -17,7 +17,7 @@
     <span>Availability and Networks</span>
     <dl>
       <dt>Availability</dt>
-      <dd *ngFor="#availability of phone?.availability">{{availability}}</dd>
+      <dd *ngFor="let availability of phone?.availability">{{availability}}</dd>
     </dl>
   </li>
   <li>
@@ -68,7 +68,7 @@
     <span>Size and Weight</span>
     <dl>
       <dt>Dimensions</dt>
-      <dd *ngFor="#dim of phone?.sizeAndWeight?.dimensions">{{dim}}</dd>
+      <dd *ngFor="let dim of phone?.sizeAndWeight?.dimensions">{{dim}}</dd>
       <dt>Weight</dt>
       <dd>{{phone?.sizeAndWeight?.weight}}</dd>
     </dl>

public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.html

@@ -18,7 +18,7 @@
 
       <!-- #docregion list -->
       <ul class="phones">
-        <li *ngFor="#phone of phones | async | phoneFilter:query | orderBy:orderProp"
+        <li *ngFor="let phone of phones | async | phoneFilter:query | orderBy:orderProp"
             class="thumbnail phone-listing">
           <a [routerLink]="['/Phone', {phoneId: phone.id}]" class="thumb"><img [src]="phone.imageUrl"></a>
           <a [routerLink]="['/Phone', {phoneId: phone.id}]" class="name">{{phone.name}}</a>

public/docs/_examples/user-input/ts/app/little-tour.component.ts

@@ -11,7 +11,7 @@ import {Component} from 'angular2/core';
 
     <button (click)=addHero(newHero.value)>Add</button>
 
-    <ul><li *ngFor="#hero of heroes">{{hero}}</li></ul>
+    <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
   `
 })
 export class LittleTourComponent {

public/docs/js/latest/_data.json

@@ -3,7 +3,7 @@
     "icon": "home",
     "title": "Angular Docs",
     "menuTitle": "Docs Home",
-    "banner": "Welcome to <b>Angular in JavaScript</b>! The current Angular 2 release is <b>beta.16</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "Welcome to <b>Angular in JavaScript</b>! The current Angular 2 release is <b>beta.17</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {

public/docs/ts/latest/_data.json

@@ -3,7 +3,7 @@
     "icon": "home",
     "title": "Angular Docs",
     "menuTitle": "Docs Home",
-    "banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>beta.16</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>beta.17</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {

tools/plunker-builder/indexHtmlTranslator.js

@@ -41,52 +41,52 @@ var _rxData = [
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2-all.umd.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.16/angular2-all.umd.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2-all.umd.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.16/angular2-all.umd.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2-polyfills.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/rxjs/bundles/Rx.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.16/Rx.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.17/Rx.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/rxjs/bundles/Rx.umd.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.16/Rx.umd.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/router.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.16/router.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.17/router.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/http.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.16/http.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.17/http.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/testing.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.16/testing.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.17/testing.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
-    to: 'https://npmcdn.com/angular2@2.0.0-beta.16/es6/dev/src/testing/shims_for_IE.js'
+    to: 'https://npmcdn.com/angular2@2.0.0-beta.17/es6/dev/src/testing/shims_for_IE.js'
   },
   {
     pattern: 'script',