feat: camelCase Angular (kebab-case removal)

BREAKING CHANGE:

Angular is now fully camel case.

Before:

    <p *ng-if="cond">
    <my-cmp [my-prop]="exp">
    <my-cmp (my-event)="action()">
    <my-cmp [(my-prop)]="prop">
    <input #my-input>
    <template ng-for #my-item [ng-for-of]=items #my-index="index">

After

    <p *ngIf="cond">
    <my-cmp [myProp]="exp">
    <my-cmp (myEvent)="action()">
    <my-cmp [(myProp)]="prop">
    <input #myInput>`,
    <template ngFor="#my-item" [ngForOf]=items #myIndex="index">

The full details are found in [angular2/docs/migration/kebab-case.md](https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md)

modules/angular2/docs/cheatsheet/built-in-directives.md

@@ -7,28 +7,29 @@ Built-in directives
 
 @cheatsheetItem
 syntax:
-`<section *ng-if="showSection">`|`*ng-if`
+`<section *ngIf="showSection">`|`*ngIf`
 description:
 Removes or recreates a portion of the DOM tree based on the showSection expression.
 
 @cheatsheetItem
 syntax:
-`<li *ng-for="#item of list">`|`*ng-for`
+`<li *ngFor="#item of list">`|`*ngFor`
 description:
 Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
 
 @cheatsheetItem
 syntax:
-`<div [ng-switch]="conditionExpression">
-  <template [ng-switch-when]="case1Exp">...</template>
-  <template ng-switch-when="case2LiteralString">...</template>
-  <template ng-switch-default>...</template>
-</div>`|`[ng-switch]`|`[ng-switch-when]`|`ng-switch-when`|`ng-switch-default`
+`<div [ngSwitch]="conditionExpression">
+  <template [ngSwitchWhen]="case1Exp">...</template>
+  <template ngSwitchWhen="case2LiteralString">...</template>
+  <template ngSwitchDefault>...</template>
+</div>`|`[ngSwitch]`|`[ngSwitchWhen]`|`ngSwitchWhen`|`ngSwitchDefault`
 description:
 Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
 
 @cheatsheetItem
 syntax:
-`<div [ng-class]="{active: isActive, disabled: isDisabled}">`|`[ng-class]`
+`<div [ngClass]="{active: isActive, disabled: isDisabled}">`|`[ngClass]`
 description:
 Binds the presence of css classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.
+

modules/angular2/docs/cheatsheet/forms.md

@@ -7,6 +7,6 @@ Forms
 
 @cheatsheetItem
 syntax:
-`<input [(ng-model)]="userName">`|`[(ng-model)]`
+`<input [(ngModel)]="userName">`|`[(ngModel)]`
 description:
 Provides two-way data-binding, parsing and validation for form controls.

modules/angular2/docs/cheatsheet/routing.md

@@ -30,8 +30,7 @@ Marks the location to load the component of the active route.
 
 
 @cheatsheetItem
-syntax:
-`<a [router-link]="[ '/MyCmp', {myParam: 'value' } ]">`|`[router-link]`
+`<a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">`|`[routerLink]`
 description:
 Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the '/' prefix to navigate to a root route; add the './' prefix for a child route.
 

modules/angular2/docs/cheatsheet/template-syntax.md

@@ -50,7 +50,7 @@ Binds text content to an interpolated string, e.g. "Hello Seabiscuit".
 syntax:
 `<my-cmp [(title)]="name">`|`[(title)]`
 description:
-Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (title-change)="name=$event">`
+Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (titleChange)="name=$event">`
 
 @cheatsheetItem
 syntax:

modules/angular2/docs/core/01_templates.md

@@ -359,20 +359,20 @@ Example of conditionally included template:
 
 ```
 Hello {{user}}!
-<div template="ng-if: isAdministrator">
+<div template="ngIf: isAdministrator">
   ...administrator menu here...
 </div>
 ```
 
-In the above example the `ng-if` directive determines whether the child view (an instance of the child template) should be
-inserted into the root view. The `ng-if` makes this decision based on if the `isAdministrator` binding is true.
+In the above example the `ngIf` directive determines whether the child view (an instance of the child template) should be
+inserted into the root view. The `ngIf` makes this decision based on if the `isAdministrator` binding is true.
 
 The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally
 identical.
 
 ```
 Hello {{user}}!
-<template [ng-if]="isAdministrator">
+<template [ngIf]="isAdministrator">
   <div>
     ...administrator menu here...
   </div>
@@ -383,22 +383,22 @@ Hello {{user}}!
 ### Template Microsyntax
 
 Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation
-of the templates occurs. One such example is `ng-for`.
+of the templates occurs. One such example is `ngFor`.
 
 ```
 <form #foo=form>
 </form>
 <ul>
-  <template [ng-for] #person [ng-for-of]="people" #i="index">
+  <template [ngFor] #person [ngForOf]="people" #i="index">
     <li>{{i}}. {{person}}<li>
   </template>
 </ul>
 ```
 
 Where:
-* `[ng-for]` triggers the for directive.
-* `#person` exports the implicit `ng-for` item.
-* `[ng-for-of]="people"` binds an iterable object to the `ng-for` controller.
+* `[ngFor]` triggers the for directive.
+* `#person` exports the implicit `ngFor` item.
+* `[ngForOf]="people"` binds an iterable object to the `ngFor` controller.
 * `#i=index` exports item index as `i`.
 
 The above example is explicit but quite wordy. For this reason in most situations a short hand version of the
@@ -406,7 +406,7 @@ syntax is preferable.
 
 ```
 <ul>
-  <li template="ng-for; #person; of=people; #i=index;">{{i}}. {{person}}<li>
+  <li template="ngFor; #person; of=people; #i=index;">{{i}}. {{person}}<li>
 </ul>
 ```
 
@@ -416,24 +416,24 @@ which allows us to further shorten the text.
 
 ```
 <ul>
-  <li template="ng-for #person of people #i=index">{{i}}. {{person}}<li>
+  <li template="ngFor #person of people #i=index">{{i}}. {{person}}<li>
 </ul>
 ```
 
 We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended
-microsyntax for `ng-for`.
+microsyntax for `ngFor`.
 
 ```
 <ul>
-  <li template="ng-for: var person of people; var i=index">{{i}}. {{person}}<li>
+  <li template="ngFor: var person of people; var i=index">{{i}}. {{person}}<li>
 </ul>
 ```
 
-Finally, we can move the `ng-for` keyword to the left hand side and prefix it with `*` as so:
+Finally, we can move the `ngFor` keyword to the left hand side and prefix it with `*` as so:
 
 ```
 <ul>
-  <li *ng-for="var person of people; var i=index">{{i}}. {{person}}<li>
+  <li *ngFor="var person of people; var i=index">{{i}}. {{person}}<li>
 </ul>
 ```
 
@@ -544,7 +544,7 @@ Angular are:
 <div title="{{expression}}">{{expression}}</div>
 <div [title]="expression">...</div>
 <div bind-title="expression">...</div>
-<div template="ng-if: expression">...</div>
+<div template="ngIf: expression">...</div>
 ```
 
 Expressions are simplified version of expression in the language in which you are writing your application. (i.e.

modules/angular2/docs/core/02_directives.md

@@ -161,7 +161,7 @@ Example of usage:
 
 ## Directives that use a ViewContainer
 
-Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ng-if` and `ng-for`.)
+Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ngIf` and `ngFor`.)
 
 * Every `template` element creates a `ProtoView` which can be used to create Views via the ViewContainer.
 * The child views show up as siblings of the directive in the DOM.

modules/angular2/docs/core/10_view.md

@@ -94,7 +94,7 @@ Let's start with a View such as:
 
 ```
 <ul>
-  <li template="ng-for: #person of people">{{person}}</li>
+  <li template="ngFor: #person of people">{{person}}</li>
 </ul>
 ```
 

modules/angular2/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts

@@ -22,7 +22,7 @@ export class SlicePipeStringExample {
 @Component({
   selector: 'slice-list-example',
   template: `<div>
-    <li *ng-for="var i of collection | slice:1:3">{{i}}</li>
+    <li *ngFor="var i of collection | slice:1:3">{{i}}</li>
   </div>`
 })
 export class SlicePipeListExample {
@@ -33,7 +33,7 @@ export class SlicePipeListExample {
 @Component({
   selector: 'example-app',
   directives: [SlicePipeListExample, SlicePipeStringExample],
-  template: ` 
+  template: `
     <h1>SlicePipe Examples</h1>
     <slice-list-example></slice-list-example>
     <slice-string-example></slice-string-example>

modules/angular2/examples/router/ts/can_activate/can_activate_example.ts

@@ -24,8 +24,8 @@ class ControlPanelCmp {
   template: `
     <h1>Welcome Home!</h1>
     <div>
-      Edit <a [router-link]="['/ControlPanelCmp', {id: 1}]" id="user-1-link">User 1</a> |
-      Edit <a [router-link]="['/ControlPanelCmp', {id: 2}]" id="user-2-link">User 2</a>
+      Edit <a [routerLink]="['/ControlPanelCmp', {id: 1}]" id="user-1-link">User 1</a> |
+      Edit <a [routerLink]="['/ControlPanelCmp', {id: 2}]" id="user-2-link">User 2</a>
     </div>
   `,
   directives: [ROUTER_DIRECTIVES]

modules/angular2/examples/router/ts/can_deactivate/can_deactivate_example.ts

@@ -34,8 +34,8 @@ class NoteCmp implements CanDeactivate {
   template: `
     <h1>Your Notes</h1>
     <div>
-      Edit <a [router-link]="['/NoteCmp', {id: 1}]" id="note-1-link">Note 1</a> |
-      Edit <a [router-link]="['/NoteCmp', {id: 2}]" id="note-2-link">Note 2</a>
+      Edit <a [routerLink]="['/NoteCmp', {id: 1}]" id="note-1-link">Note 1</a> |
+      Edit <a [routerLink]="['/NoteCmp', {id: 2}]" id="note-2-link">Note 2</a>
     </div>
   `,
   directives: [ROUTER_DIRECTIVES]

modules/angular2/examples/router/ts/on_activate/on_activate_example.ts

@@ -25,8 +25,8 @@ class MyCmp implements OnActivate {
   template: `
     <h1>My App</h1>
     <nav>
-      <a [router-link]="['/HomeCmp']" id="home-link">Navigate Home</a> |
-      <a [router-link]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
+      <a [routerLink]="['/HomeCmp']" id="home-link">Navigate Home</a> |
+      <a [routerLink]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
     </nav>
     <router-outlet></router-outlet>
   `,

modules/angular2/examples/router/ts/on_deactivate/on_deactivate_example.ts

@@ -34,13 +34,13 @@ class MyCmp implements OnDeactivate {
   template: `
     <h1>My App</h1>
     <nav>
-      <a [router-link]="['/HomeCmp']" id="home-link">Navigate Home</a> |
-      <a [router-link]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
+      <a [routerLink]="['/HomeCmp']" id="home-link">Navigate Home</a> |
+      <a [routerLink]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
     </nav>
     <router-outlet></router-outlet>
     <div id="log">
       <h2>Log:</h2>
-      <p *ng-for="#logItem of logService.logs">{{ logItem }}</p>
+      <p *ngFor="#logItem of logService.logs">{{ logItem }}</p>
     </div>
   `,
   directives: [ROUTER_DIRECTIVES, NgFor]

modules/angular2/examples/router/ts/reuse/reuse_example.ts

@@ -37,8 +37,8 @@ class MyCmp implements CanReuse,
   selector: 'example-app',
   template: `
     <h1>Say hi to...</h1>
-    <a [router-link]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> |
-    <a [router-link]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a>
+    <a [routerLink]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> |
+    <a [routerLink]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a>
     <router-outlet></router-outlet>
   `,
   directives: [ROUTER_DIRECTIVES]

modules/angular2/http.ts

@@ -54,7 +54,7 @@ export {URLSearchParams} from './src/http/url_search_params';
  *     <div>
  *       <h1>People</h1>
  *       <ul>
- *         <li *ng-for="#person of people">
+ *         <li *ngFor="#person of people">
  *           {{person.name}}
  *         </li>
  *       </ul>
@@ -185,7 +185,7 @@ export const HTTP_BINDINGS = HTTP_PROVIDERS;
  *     <div>
  *       <h1>People</h1>
  *       <ul>
- *         <li *ng-for="#person of people">
+ *         <li *ngFor="#person of people">
  *           {{person.name}}
  *         </li>
  *       </ul>

modules/angular2/src/common/directives/ng_class.ts

@@ -37,7 +37,7 @@ import {StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collecti
  *   selector: 'toggle-button',
  *   inputs: ['isDisabled'],
  *   template: `
- *      <div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
+ *      <div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
  *          (click)="toggle(!isOn)">
  *          Click me!
  *      </div>`,
@@ -70,7 +70,7 @@ import {StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collecti
  * }
  * ```
  */
-@Directive({selector: '[ng-class]', inputs: ['rawClass: ng-class', 'initialClasses: class']})
+@Directive({selector: '[ngClass]', inputs: ['rawClass: ngClass', 'initialClasses: class']})
 export class NgClass implements DoCheck, OnDestroy {
   private _differ: any;
   private _mode: string;

modules/angular2/src/common/directives/ng_for.ts

@@ -50,16 +50,16 @@ import {isPresent, isBlank} from 'angular2/src/facade/lang';
  *
  * # Syntax
  *
- * - `<li *ng-for="#item of items; #i = index">...</li>`
- * - `<li template="ng-for #item of items; #i = index">...</li>`
- * - `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>`
+ * - `<li *ngFor="#item of items; #i = index">...</li>`
+ * - `<li template="ngFor #item of items; #i = index">...</li>`
+ * - `<template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>`
  *
  * ### Example
  *
  * See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
  * example.
  */
-@Directive({selector: '[ng-for][ng-for-of]', inputs: ['ngForOf', 'ngForTemplate']})
+@Directive({selector: '[ngFor][ngForOf]', inputs: ['ngForOf', 'ngForTemplate']})
 export class NgFor implements DoCheck {
   /** @internal */
   _ngForOf: any;

modules/angular2/src/common/directives/ng_if.ts

@@ -4,13 +4,13 @@ import {isBlank} from 'angular2/src/facade/lang';
 /**
  * Removes or recreates a portion of the DOM tree based on an {expression}.
  *
- * If the expression assigned to `ng-if` evaluates to a false value then the element
+ * If the expression assigned to `ngIf` evaluates to a false value then the element
  * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
  *
  * ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
  *
  * ```
- * <div *ng-if="errorCount > 0" class="error">
+ * <div *ngIf="errorCount > 0" class="error">
  *   <!-- Error message displayed when the errorCount property on the current context is greater
  * than 0. -->
  *   {{errorCount}} errors detected
@@ -19,11 +19,11 @@ import {isBlank} from 'angular2/src/facade/lang';
  *
  * ### Syntax
  *
- * - `<div *ng-if="condition">...</div>`
- * - `<div template="ng-if condition">...</div>`
- * - `<template [ng-if]="condition"><div>...</div></template>`
+ * - `<div *ngIf="condition">...</div>`
+ * - `<div template="ngIf condition">...</div>`
+ * - `<template [ngIf]="condition"><div>...</div></template>`
  */
-@Directive({selector: '[ng-if]', inputs: ['ngIf']})
+@Directive({selector: '[ngIf]', inputs: ['ngIf']})
 export class NgIf {
   private _prevCondition: boolean = null;
 

modules/angular2/src/common/directives/ng_style.ts

@@ -11,14 +11,14 @@ import {isPresent, isBlank, print} from 'angular2/src/facade/lang';
 /**
  * The `NgStyle` directive changes styles based on a result of expression evaluation.
  *
- * An expression assigned to the `ng-style` property must evaluate to an object and the
+ * An expression assigned to the `ngStyle` property must evaluate to an object and the
  * corresponding element styles are updated based on changes to this object. Style names to update
  * are taken from the object's keys, and values - from the corresponding object's values.
  *
  * ### Syntax
  *
- * - `<div [ng-style]="{'font-style': style}"></div>`
- * - `<div [ng-style]="styleExp"></div>` - here the `styleExp` must evaluate to an object
+ * - `<div [ngStyle]="{'font-style': style}"></div>`
+ * - `<div [ngStyle]="styleExp"></div>` - here the `styleExp` must evaluate to an object
  *
  * ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)):
  *
@@ -26,9 +26,9 @@ import {isPresent, isBlank, print} from 'angular2/src/facade/lang';
  * import {Component, NgStyle} from 'angular2/angular2';
  *
  * @Component({
- *  selector: 'ng-style-example',
+ *  selector: 'ngStyle-example',
  *  template: `
- *    <h1 [ng-style]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
+ *    <h1 [ngStyle]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
  *      Change style of this text!
  *    </h1>
  *
@@ -58,7 +58,7 @@ import {isPresent, isBlank, print} from 'angular2/src/facade/lang';
  * In this example the `font-style`, `font-size` and `font-weight` styles will be updated
  * based on the `style` property's value changes.
  */
-@Directive({selector: '[ng-style]', inputs: ['rawStyle: ng-style']})
+@Directive({selector: '[ngStyle]', inputs: ['rawStyle: ngStyle']})
 export class NgStyle implements DoCheck {
   /** @internal */
   _rawStyle;

modules/angular2/src/common/directives/ng_switch.ts

@@ -21,12 +21,12 @@ class SwitchView {
  * `NgSwitch` simply inserts nested elements based on which match expression matches the value
  * obtained from the evaluated switch expression. In other words, you define a container element
  * (where you place the directive with a switch expression on the
- * **`[ng-switch]="..."` attribute**), define any inner elements inside of the directive and
- * place a `[ng-switch-when]` attribute per element.
+ * **`[ngSwitch]="..."` attribute**), define any inner elements inside of the directive and
+ * place a `[ngSwitchWhen]` attribute per element.
  *
- * The `ng-switch-when` property is used to inform `NgSwitch` which element to display when the
- * expression is evaluated. If a matching expression is not found via a `ng-switch-when` property
- * then an element with the `ng-switch-default` attribute is displayed.
+ * The `ngSwitchWhen` property is used to inform `NgSwitch` which element to display when the
+ * expression is evaluated. If a matching expression is not found via a `ngSwitchWhen` property
+ * then an element with the `ngSwitchDefault` attribute is displayed.
  *
  * ### Example ([live demo](http://plnkr.co/edit/DQMTII95CbuqWrl3lYAs?p=preview))
  *
@@ -37,22 +37,22 @@ class SwitchView {
  *     <p>Value = {{value}}</p>
  *     <button (click)="inc()">Increment</button>
  *
- *     <div [ng-switch]="value">
- *       <p *ng-switch-when="'init'">increment to start</p>
- *       <p *ng-switch-when="0">0, increment again</p>
- *       <p *ng-switch-when="1">1, increment again</p>
- *       <p *ng-switch-when="2">2, stop incrementing</p>
- *       <p *ng-switch-default>&gt; 2, STOP!</p>
+ *     <div [ngSwitch]="value">
+ *       <p *ngSwitchWhen="'init'">increment to start</p>
+ *       <p *ngSwitchWhen="0">0, increment again</p>
+ *       <p *ngSwitchWhen="1">1, increment again</p>
+ *       <p *ngSwitchWhen="2">2, stop incrementing</p>
+ *       <p *ngSwitchDefault>&gt; 2, STOP!</p>
  *     </div>
  *
  *     <!-- alternate syntax -->
  *
- *     <p [ng-switch]="value">
- *       <template ng-switch-when="init">increment to start</template>
- *       <template [ng-switch-when]="0">0, increment again</template>
- *       <template [ng-switch-when]="1">1, increment again</template>
- *       <template [ng-switch-when]="2">2, stop incrementing</template>
- *       <template ng-switch-default>&gt; 2, STOP!</template>
+ *     <p [ngSwitch]="value">
+ *       <template ngSwitchWhen="init">increment to start</template>
+ *       <template [ngSwitchWhen]="0">0, increment again</template>
+ *       <template [ngSwitchWhen]="1">1, increment again</template>
+ *       <template [ngSwitchWhen]="2">2, stop incrementing</template>
+ *       <template ngSwitchDefault>&gt; 2, STOP!</template>
  *     </p>
  *   `,
  *   directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
@@ -68,7 +68,7 @@ class SwitchView {
  * bootstrap(App).catch(err => console.error(err));
  * ```
  */
-@Directive({selector: '[ng-switch]', inputs: ['ngSwitch']})
+@Directive({selector: '[ngSwitch]', inputs: ['ngSwitch']})
 export class NgSwitch {
   private _switchValue: any;
   private _useDefault: boolean = false;
@@ -159,14 +159,14 @@ export class NgSwitch {
 }
 
 /**
- * Insert the sub-tree when the `ng-switch-when` expression evaluates to the same value as the
+ * Insert the sub-tree when the `ngSwitchWhen` expression evaluates to the same value as the
  * enclosing switch expression.
  *
  * If multiple match expression match the switch expression value, all of them are displayed.
  *
  * See {@link NgSwitch} for more details and example.
  */
-@Directive({selector: '[ng-switch-when]', inputs: ['ngSwitchWhen']})
+@Directive({selector: '[ngSwitchWhen]', inputs: ['ngSwitchWhen']})
 export class NgSwitchWhen {
   // `_WHEN_DEFAULT` is used as a marker for a not yet initialized value
   /** @internal */
@@ -193,7 +193,7 @@ export class NgSwitchWhen {
  *
  * See {@link NgSwitch} for more details and example.
  */
-@Directive({selector: '[ng-switch-default]'})
+@Directive({selector: '[ngSwitchDefault]'})
 export class NgSwitchDefault {
   constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef,
               @Host() sswitch: NgSwitch) {

modules/angular2/src/common/forms/directives/checkbox_value_accessor.ts

@@ -11,12 +11,12 @@ const CHECKBOX_VALUE_ACCESSOR = CONST_EXPR(new Provider(
  *
  *  ### Example
  *  ```
- *  <input type="checkbox" ng-control="rememberLogin">
+ *  <input type="checkbox" ngControl="rememberLogin">
  *  ```
  */
 @Directive({
   selector:
-      'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
+      'input[type=checkbox][ngControl],input[type=checkbox][ngFormControl],input[type=checkbox][ngModel]',
   host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
   bindings: [CHECKBOX_VALUE_ACCESSOR]
 })

modules/angular2/src/common/forms/directives/default_value_accessor.ts

@@ -11,15 +11,15 @@ const DEFAULT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
  *
  *  ### Example
  *  ```
- *  <input type="text" ng-control="searchQuery">
+ *  <input type="text" ngControl="searchQuery">
  *  ```
  */
 @Directive({
   selector:
-      'input:not([type=checkbox])[ng-control],textarea[ng-control],input:not([type=checkbox])[ng-form-control],textarea[ng-form-control],input:not([type=checkbox])[ng-model],textarea[ng-model],[ng-default-control]',
+      'input:not([type=checkbox])[ngControl],textarea[ngControl],input:not([type=checkbox])[ngFormControl],textarea[ngFormControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
   // TODO: vsavkin replace the above selector with the one below it once
   // https://github.com/angular/angular/issues/3011 is implemented
-  // selector: '[ng-control],[ng-model],[ng-form-control]',
+  // selector: '[ngControl],[ngModel],[ngFormControl]',
   host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
   bindings: [DEFAULT_VALUE_ACCESSOR]
 })

modules/angular2/src/common/forms/directives/ng_control_group.ts

@@ -38,17 +38,17 @@ const controlGroupProvider =
  *     <div>
  *       <h2>Angular2 Control &amp; ControlGroup Example</h2>
  *       <form #f="ngForm">
- *         <div ng-control-group="name" #cg-name="ngForm">
+ *         <div ngControlGroup="name" #cg-name="form">
  *           <h3>Enter your name:</h3>
- *           <p>First: <input ng-control="first" required></p>
- *           <p>Middle: <input ng-control="middle"></p>
- *           <p>Last: <input ng-control="last" required></p>
+ *           <p>First: <input ngControl="first" required></p>
+ *           <p>Middle: <input ngControl="middle"></p>
+ *           <p>Last: <input ngControl="last" required></p>
  *         </div>
  *         <h3>Name value:</h3>
  *         <pre>{{valueOf(cgName)}}</pre>
  *         <p>Name is {{cgName?.control?.valid ? "valid" : "invalid"}}</p>
  *         <h3>What's your favorite food?</h3>
- *         <p><input ng-control="food"></p>
+ *         <p><input ngControl="food"></p>
  *         <h3>Form value</h3>
  *         <pre>{{valueOf(f)}}</pre>
  *       </form>
@@ -70,9 +70,9 @@ const controlGroupProvider =
  * this group can be accessed separately from the overall form.
  */
 @Directive({
-  selector: '[ng-control-group]',
+  selector: '[ngControlGroup]',
   providers: [controlGroupProvider],
-  inputs: ['name: ng-control-group'],
+  inputs: ['name: ngControlGroup'],
   exportAs: 'ngForm'
 })
 export class NgControlGroup extends ControlContainer implements OnInit,

modules/angular2/src/common/forms/directives/ng_control_name.ts

@@ -50,10 +50,10 @@ const controlNameBinding =
  *      directives: [FORM_DIRECTIVES],
  *      template: `
  *        <form #f="ngForm" (submit)='onLogIn(f.value)'>
- *          Login <input type='text' ng-control='login' #l="ngForm">
- *          <div *ng-if="!l.valid">Login is invalid</div>
+ *          Login <input type='text' ngControl='login' #l="form">
+ *          <div *ngIf="!l.valid">Login is invalid</div>
  *
- *          Password <input type='password' ng-control='password'>
+ *          Password <input type='password' ngControl='password'>
  *          <button type='submit'>Log in!</button>
  *        </form>
  *      `})
@@ -64,7 +64,7 @@ const controlNameBinding =
  * }
  *  ```
  *
- * We can also use ng-model to bind a domain model to the form.
+ * We can also use ngModel to bind a domain model to the form.
  *
  *  ```
  * @Component({
@@ -72,9 +72,9 @@ const controlNameBinding =
  *      directives: [FORM_DIRECTIVES],
  *      template: `
  *        <form (submit)='onLogIn()'>
- *          Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
- *          Password <input type='password' ng-control='password'
- *                          [(ng-model)]="credentials.password">
+ *          Login <input type='text' ngControl='login' [(ngModel)]="credentials.login">
+ *          Password <input type='password' ngControl='password'
+ *                          [(ngModel)]="credentials.password">
  *          <button type='submit'>Log in!</button>
  *        </form>
  *      `})
@@ -89,7 +89,7 @@ const controlNameBinding =
  *  ```
  */
 @Directive({
-  selector: '[ng-control]',
+  selector: '[ngControl]',
   bindings: [controlNameBinding],
   inputs: ['name: ngControl', 'model: ngModel'],
   outputs: ['update: ngModelChange'],

modules/angular2/src/common/forms/directives/ng_control_status.ts

@@ -3,7 +3,7 @@ import {NgControl} from './ng_control';
 import {isBlank, isPresent} from 'angular2/src/facade/lang';
 
 @Directive({
-  selector: '[ng-control],[ng-model],[ng-form-control]',
+  selector: '[ngControl],[ngModel],[ngFormControl]',
   host: {
     '[class.ng-untouched]': 'ngClassUntouched',
     '[class.ng-touched]': 'ngClassTouched',

modules/angular2/src/common/forms/directives/ng_form.ts

@@ -36,7 +36,7 @@ const formDirectiveProvider =
  *
  * ### Submission
  *
- * The `ng-submit` event signals when the user triggers a form submission.
+ * The `ngSubmit` event signals when the user triggers a form submission.
  *
  * ### Example ([live demo](http://plnkr.co/edit/ltdgYj4P0iY64AR71EpL?p=preview))
  *
@@ -47,16 +47,16 @@ const formDirectiveProvider =
  *     <div>
  *       <p>Submit the form to see the data object Angular builds</p>
  *       <h2>NgForm demo</h2>
- *       <form #f="ngForm" (ng-submit)="onSubmit(f.value)">
+ *       <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
  *         <h3>Control group: credentials</h3>
- *         <div ng-control-group="credentials">
- *           <p>Login: <input type="text" ng-control="login"></p>
- *           <p>Password: <input type="password" ng-control="password"></p>
+ *         <div ngControlGroup="credentials">
+ *           <p>Login: <input type="text" ngControl="login"></p>
+ *           <p>Password: <input type="password" ngControl="password"></p>
  *         </div>
  *         <h3>Control group: person</h3>
- *         <div ng-control-group="person">
- *           <p>First name: <input type="text" ng-control="firstName"></p>
- *           <p>Last name: <input type="text" ng-control="lastName"></p>
+ *         <div ngControlGroup="person">
+ *           <p>First name: <input type="text" ngControl="firstName"></p>
+ *           <p>Last name: <input type="text" ngControl="lastName"></p>
  *         </div>
  *         <button type="submit">Submit Form</button>
  *       <p>Form data submitted:</p>
@@ -78,7 +78,7 @@ const formDirectiveProvider =
  *  ```
  */
 @Directive({
-  selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]',
+  selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]',
   bindings: [formDirectiveProvider],
   host: {
     '(submit)': 'onSubmit()',

modules/angular2/src/common/forms/directives/ng_form_control.ts

@@ -44,7 +44,7 @@ const formControlBinding =
  *       <h2>NgFormControl Example</h2>
  *       <form>
  *         <p>Element with existing control: <input type="text"
- * [ng-form-control]="loginControl"></p>
+ * [ngFormControl]="loginControl"></p>
  *         <p>Value of existing control: {{loginControl.value}}</p>
  *       </form>
  *     </div>
@@ -56,9 +56,9 @@ const formControlBinding =
  * }
  *  ```
  *
- * ###ng-model
+ * ###ngModel
  *
- * We can also use `ng-model` to bind a domain model to the form.
+ * We can also use `ngModel` to bind a domain model to the form.
  *
  * ### Example ([live demo](http://plnkr.co/edit/yHMLuHO7DNgT8XvtjTDH?p=preview))
  *
@@ -66,7 +66,7 @@ const formControlBinding =
  * @Component({
  *      selector: "login-comp",
  *      directives: [FORM_DIRECTIVES],
- *      template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
+ *      template: "<input type='text' [ngFormControl]='loginControl' [(ngModel)]='login'>"
  *      })
  * class LoginComp {
  *  loginControl: Control = new Control('');
@@ -75,7 +75,7 @@ const formControlBinding =
  *  ```
  */
 @Directive({
-  selector: '[ng-form-control]',
+  selector: '[ngFormControl]',
   bindings: [formControlBinding],
   inputs: ['form: ngFormControl', 'model: ngModel'],
   outputs: ['update: ngModelChange'],

modules/angular2/src/common/forms/directives/ng_form_model.ts

@@ -36,9 +36,9 @@ const formDirectiveProvider =
  *   template: `
  *     <div>
  *       <h2>NgFormModel Example</h2>
- *       <form [ng-form-model]="loginForm">
- *         <p>Login: <input type="text" ng-control="login"></p>
- *         <p>Password: <input type="password" ng-control="password"></p>
+ *       <form [ngFormModel]="loginForm">
+ *         <p>Login: <input type="text" ngControl="login"></p>
+ *         <p>Password: <input type="password" ngControl="password"></p>
  *       </form>
  *       <p>Value:</p>
  *       <pre>{{value}}</pre>
@@ -62,17 +62,17 @@ const formDirectiveProvider =
  * }
  *  ```
  *
- * We can also use ng-model to bind a domain model to the form.
+ * We can also use ngModel to bind a domain model to the form.
  *
  *  ```typescript
  * @Component({
  *      selector: "login-comp",
  *      directives: [FORM_DIRECTIVES],
  *      template: `
- *        <form [ng-form-model]='loginForm'>
- *          Login <input type='text' ng-control='login' [(ng-model)]='credentials.login'>
- *          Password <input type='password' ng-control='password'
- *                          [(ng-model)]='credentials.password'>
+ *        <form [ngFormModel]='loginForm'>
+ *          Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'>
+ *          Password <input type='password' ngControl='password'
+ *                          [(ngModel)]='credentials.password'>
  *          <button (click)="onLogin()">Login</button>
  *        </form>`
  *      })
@@ -95,9 +95,9 @@ const formDirectiveProvider =
  *  ```
  */
 @Directive({
-  selector: '[ng-form-model]',
+  selector: '[ngFormModel]',
   bindings: [formDirectiveProvider],
-  inputs: ['form: ng-form-model'],
+  inputs: ['form: ngFormModel'],
   host: {'(submit)': 'onSubmit()'},
   outputs: ['ngSubmit'],
   exportAs: 'ngForm'

modules/angular2/src/common/forms/directives/ng_model.ts

@@ -31,8 +31,8 @@ const formControlBinding =
  *
  * ### Usage
  *
- * `ng-model` binds an existing domain model to a form control. For a
- * two-way binding, use `[(ng-model)]` to ensure the model updates in
+ * `ngModel` binds an existing domain model to a form control. For a
+ * two-way binding, use `[(ngModel)]` to ensure the model updates in
  * both directions.
  *
  * ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview))
@@ -40,7 +40,7 @@ const formControlBinding =
  * @Component({
  *      selector: "search-comp",
  *      directives: [FORM_DIRECTIVES],
- *      template: `<input type='text' [(ng-model)]="searchQuery">`
+ *      template: `<input type='text' [(ngModel)]="searchQuery">`
  *      })
  * class SearchComp {
  *  searchQuery: string;
@@ -48,7 +48,7 @@ const formControlBinding =
  *  ```
  */
 @Directive({
-  selector: '[ng-model]:not([ng-control]):not([ng-form-control])',
+  selector: '[ngModel]:not([ngControl]):not([ngFormControl])',
   bindings: [formControlBinding],
   inputs: ['model: ngModel'],
   outputs: ['update: ngModelChange'],

modules/angular2/src/common/forms/directives/number_value_accessor.ts

@@ -11,12 +11,12 @@ const NUMBER_VALUE_ACCESSOR = CONST_EXPR(new Provider(
  *
  *  ### Example
  *  ```
- *  <input type="number" [(ng-model)]="age">
+ *  <input type="number" [(ngModel)]="age">
  *  ```
  */
 @Directive({
   selector:
-      'input[type=number][ng-control],input[type=number][ng-form-control],input[type=number][ng-model]',
+      'input[type=number][ngControl],input[type=number][ngFormControl],input[type=number][ngModel]',
   host: {
     '(change)': 'onChange($event.target.value)',
     '(input)': 'onChange($event.target.value)',

modules/angular2/src/common/forms/directives/select_control_value_accessor.ts

@@ -22,8 +22,8 @@ const SELECT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
  * ### Example
  *
  * ```
- * <select ng-control="city">
- *   <option *ng-for="#c of cities" [value]="c"></option>
+ * <select ngControl="city">
+ *   <option *ngFor="#c of cities" [value]="c"></option>
  * </select>
  * ```
  */
@@ -35,7 +35,7 @@ export class NgSelectOption {
  * The accessor for writing a value and listening to changes on a select element.
  */
 @Directive({
-  selector: 'select[ng-control],select[ng-form-control],select[ng-model]',
+  selector: 'select[ngControl],select[ngFormControl],select[ngModel]',
   host: {
     '(change)': 'onChange($event.target.value)',
     '(input)': 'onChange($event.target.value)',

modules/angular2/src/common/forms/directives/validators.ts

@@ -35,11 +35,11 @@ const REQUIRED_VALIDATOR =
  * ### Example
  *
  * ```
- * <input ng-control="fullName" required>
+ * <input ngControl="fullName" required>
  * ```
  */
 @Directive({
-  selector: '[required][ng-control],[required][ng-form-control],[required][ng-model]',
+  selector: '[required][ngControl],[required][ngFormControl],[required][ngModel]',
   providers: [REQUIRED_VALIDATOR]
 })
 export class RequiredValidator {
@@ -48,7 +48,7 @@ export class RequiredValidator {
 const MIN_LENGTH_VALIDATOR = CONST_EXPR(
     new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MinLengthValidator), multi: true}));
 @Directive({
-  selector: '[minlength][ng-control],[minlength][ng-form-control],[minlength][ng-model]',
+  selector: '[minlength][ngControl],[minlength][ngFormControl],[minlength][ngModel]',
   providers: [MIN_LENGTH_VALIDATOR]
 })
 export class MinLengthValidator implements Validator {
@@ -64,7 +64,7 @@ export class MinLengthValidator implements Validator {
 const MAX_LENGTH_VALIDATOR = CONST_EXPR(
     new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MaxLengthValidator), multi: true}));
 @Directive({
-  selector: '[maxlength][ng-control],[maxlength][ng-form-control],[maxlength][ng-model]',
+  selector: '[maxlength][ngControl],[maxlength][ngFormControl],[maxlength][ngModel]',
   providers: [MAX_LENGTH_VALIDATOR]
 })
 export class MaxLengthValidator implements Validator {

modules/angular2/src/common/forms/form_builder.ts

@@ -14,11 +14,11 @@ import * as modelModule from './model';
  *   selector: 'my-app',
  *   viewBindings: [FORM_BINDINGS]
  *   template: `
- *     <form [ng-form-model]="loginForm">
- *       <p>Login <input ng-control="login"></p>
- *       <div ng-control-group="passwordRetry">
- *         <p>Password <input type="password" ng-control="password"></p>
- *         <p>Confirm password <input type="password" ng-control="passwordConfirmation"></p>
+ *     <form [ngFormModel]="loginForm">
+ *       <p>Login <input ngControl="login"></p>
+ *       <div ngControlGroup="passwordRetry">
+ *         <p>Password <input type="password" ngControl="password"></p>
+ *         <p>Confirm password <input type="password" ngControl="passwordConfirmation"></p>
  *       </div>
  *     </form>
  *     <h3>Form value:</h3>

modules/angular2/src/common/pipes/slice_pipe.ts

@@ -42,7 +42,7 @@ import {InvalidPipeArgumentException} from './invalid_pipe_argument_exception';
  *
  * ## List Example
  *
- * This `ng-for` example:
+ * This `ngFor` example:
  *
  * {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_list'}
  *

modules/angular2/src/compiler/html_parser.ts

@@ -200,7 +200,7 @@ class TreeBuilder {
   private _popElement(fullName: string): boolean {
     for (let stackIndex = this.elementStack.length - 1; stackIndex >= 0; stackIndex--) {
       let el = this.elementStack[stackIndex];
-      if (el.name.toLowerCase() == fullName.toLowerCase()) {
+      if (el.name == fullName) {
         ListWrapper.splice(this.elementStack, stackIndex, this.elementStack.length - stackIndex);
         return true;
       }

modules/angular2/src/compiler/selector.ts

@@ -84,12 +84,7 @@ export class CssSelector {
            ListWrapper.isEmpty(this.attrs) && this.notSelectors.length === 0;
   }
 
-  setElement(element: string = null) {
-    if (isPresent(element)) {
-      element = element.toLowerCase();
-    }
-    this.element = element;
-  }
+  setElement(element: string = null) { this.element = element; }
 
   /** Gets a template string for an element that matches the selector. */
   getMatchingElementTemplate(): string {
@@ -107,7 +102,7 @@ export class CssSelector {
   }
 
   addAttribute(name: string, value: string = _EMPTY_ATTR_VALUE) {
-    this.attrs.push(name.toLowerCase());
+    this.attrs.push(name);
     if (isPresent(value)) {
       value = value.toLowerCase();
     } else {

modules/angular2/src/compiler/template_parser.ts

@@ -44,7 +44,7 @@ import {
   htmlVisitAll
 } from './html_ast';
 
-import {dashCaseToCamelCase, camelCaseToDashCase, splitAtColon} from './util';
+import {splitAtColon} from './util';
 
 // Group 1 = "bind-"
 // Group 2 = "var-" or "#"
@@ -55,7 +55,7 @@ import {dashCaseToCamelCase, camelCaseToDashCase, splitAtColon} from './util';
 // Group 7 = idenitifer inside []
 // Group 8 = identifier inside ()
 var BIND_NAME_REGEXP =
-    /^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/ig;
+    /^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/g;
 
 const TEMPLATE_ELEMENT = 'template';
 const TEMPLATE_ATTR = 'template';
@@ -270,7 +270,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
                                       targetProps: BoundElementOrDirectiveProperty[],
                                       targetVars: VariableAst[]): boolean {
     var templateBindingsSource = null;
-    if (attr.name.toLowerCase() == TEMPLATE_ATTR) {
+    if (attr.name == TEMPLATE_ATTR) {
       templateBindingsSource = attr.value;
     } else if (attr.name.startsWith(TEMPLATE_ATTR_PREFIX)) {
       var key = attr.name.substring(TEMPLATE_ATTR_PREFIX.length);  // remove the star
@@ -280,17 +280,15 @@ class TemplateParseVisitor implements HtmlAstVisitor {
       var bindings = this._parseTemplateBindings(templateBindingsSource, attr.sourceSpan);
       for (var i = 0; i < bindings.length; i++) {
         var binding = bindings[i];
-        var dashCaseKey = camelCaseToDashCase(binding.key);
         if (binding.keyIsVar) {
-          targetVars.push(
-              new VariableAst(dashCaseToCamelCase(binding.key), binding.name, attr.sourceSpan));
-          targetMatchableAttrs.push([dashCaseKey, binding.name]);
+          targetVars.push(new VariableAst(binding.key, binding.name, attr.sourceSpan));
+          targetMatchableAttrs.push([binding.key, binding.name]);
         } else if (isPresent(binding.expression)) {
-          this._parsePropertyAst(dashCaseKey, binding.expression, attr.sourceSpan,
+          this._parsePropertyAst(binding.key, binding.expression, attr.sourceSpan,
                                  targetMatchableAttrs, targetProps);
         } else {
-          targetMatchableAttrs.push([dashCaseKey, '']);
-          this._parseLiteralAttr(dashCaseKey, null, attr.sourceSpan, targetProps);
+          targetMatchableAttrs.push([binding.key, '']);
+          this._parseLiteralAttr(binding.key, null, attr.sourceSpan, targetProps);
         }
       }
       return true;
@@ -356,7 +354,10 @@ class TemplateParseVisitor implements HtmlAstVisitor {
 
   private _parseVariable(identifier: string, value: string, sourceSpan: ParseSourceSpan,
                          targetVars: VariableAst[]) {
-    targetVars.push(new VariableAst(dashCaseToCamelCase(identifier), value, sourceSpan));
+    if (identifier.indexOf('-') > -1) {
+      this._reportError(`"-" is not allowed in variable names`, sourceSpan);
+    }
+    targetVars.push(new VariableAst(identifier, value, sourceSpan));
   }
 
   private _parseProperty(name: string, expression: string, sourceSpan: ParseSourceSpan,
@@ -386,7 +387,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
 
   private _parseAssignmentEvent(name: string, expression: string, sourceSpan: ParseSourceSpan,
                                 targetMatchableAttrs: string[][], targetEvents: BoundEventAst[]) {
-    this._parseEvent(`${name}-change`, `${expression}=$event`, sourceSpan, targetMatchableAttrs,
+    this._parseEvent(`${name}Change`, `${expression}=$event`, sourceSpan, targetMatchableAttrs,
                      targetEvents);
   }
 
@@ -396,7 +397,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
     var parts = splitAtColon(name, [null, name]);
     var target = parts[0];
     var eventName = parts[1];
-    targetEvents.push(new BoundEventAst(dashCaseToCamelCase(eventName), target,
+    targetEvents.push(new BoundEventAst(eventName, target,
                                         this._parseAction(expression, sourceSpan), sourceSpan));
     // Don't detect directives for event names for now,
     // so don't add the event name to the matchableAttrs
@@ -405,8 +406,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
   private _parseLiteralAttr(name: string, value: string, sourceSpan: ParseSourceSpan,
                             targetProps: BoundElementOrDirectiveProperty[]) {
     targetProps.push(new BoundElementOrDirectiveProperty(
-        dashCaseToCamelCase(name), this._exprParser.wrapLiteralPrimitive(value, ''), true,
-        sourceSpan));
+        name, this._exprParser.wrapLiteralPrimitive(value, ''), true, sourceSpan));
   }
 
   private _parseDirectives(selectorMatcher: SelectorMatcher,
@@ -493,16 +493,14 @@ class TemplateParseVisitor implements HtmlAstVisitor {
     if (isPresent(directiveProperties)) {
       var boundPropsByName = new Map<string, BoundElementOrDirectiveProperty>();
       boundProps.forEach(boundProp => {
-        var key = dashCaseToCamelCase(boundProp.name);
         var prevValue = boundPropsByName.get(boundProp.name);
         if (isBlank(prevValue) || prevValue.isLiteral) {
-          // give [a]="b" a higher precedence thatn a="b" on the same element
-          boundPropsByName.set(key, boundProp);
+          // give [a]="b" a higher precedence than a="b" on the same element
+          boundPropsByName.set(boundProp.name, boundProp);
         }
       });
 
       StringMapWrapper.forEach(directiveProperties, (elProp: string, dirProp: string) => {
-        elProp = dashCaseToCamelCase(elProp);
         var boundProp = boundPropsByName.get(elProp);
 
         // Bindings are optional, so this binding only needs to be set up if an expression is given.
@@ -539,7 +537,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
     var boundPropertyName;
     var parts = name.split(PROPERTY_PARTS_SEPARATOR);
     if (parts.length === 1) {
-      boundPropertyName = this._schemaRegistry.getMappedPropName(dashCaseToCamelCase(parts[0]));
+      boundPropertyName = this._schemaRegistry.getMappedPropName(parts[0]);
       bindingType = PropertyBindingType.Property;
       if (!this._schemaRegistry.hasProperty(elementName, boundPropertyName)) {
         this._reportError(
@@ -547,20 +545,18 @@ class TemplateParseVisitor implements HtmlAstVisitor {
             sourceSpan);
       }
     } else {
-      let lcPrefix = parts[0].toLowerCase();
-      if (lcPrefix == ATTRIBUTE_PREFIX) {
-        boundPropertyName = dashCaseToCamelCase(parts[1]);
+      if (parts[0] == ATTRIBUTE_PREFIX) {
+        boundPropertyName = parts[1];
         bindingType = PropertyBindingType.Attribute;
-      } else if (lcPrefix == CLASS_PREFIX) {
-        // keep original case!
+      } else if (parts[0] == CLASS_PREFIX) {
         boundPropertyName = parts[1];
         bindingType = PropertyBindingType.Class;
-      } else if (lcPrefix == STYLE_PREFIX) {
+      } else if (parts[0] == STYLE_PREFIX) {
         unit = parts.length > 2 ? parts[2] : null;
-        boundPropertyName = dashCaseToCamelCase(parts[1]);
+        boundPropertyName = parts[1];
         bindingType = PropertyBindingType.Style;
       } else {
-        this._reportError(`Invalid property name ${name}`, sourceSpan);
+        this._reportError(`Invalid property name '${name}'`, sourceSpan);
         bindingType = null;
       }
     }
@@ -694,7 +690,7 @@ function createElementCssSelector(elementName: string, matchableAttrs: string[][
 
   cssSelector.setElement(elementName);
   for (var i = 0; i < matchableAttrs.length; i++) {
-    var attrName = matchableAttrs[i][0].toLowerCase();
+    var attrName = matchableAttrs[i][0];
     var attrValue = matchableAttrs[i][1];
     cssSelector.addAttribute(attrName, attrValue);
     if (attrName == CLASS_ATTR) {

modules/angular2/src/compiler/template_preparser.ts

@@ -9,7 +9,7 @@ const LINK_STYLE_HREF_ATTR = 'href';
 const LINK_STYLE_REL_VALUE = 'stylesheet';
 const STYLE_ELEMENT = 'style';
 const SCRIPT_ELEMENT = 'script';
-const NG_NON_BINDABLE_ATTR = 'ng-non-bindable';
+const NG_NON_BINDABLE_ATTR = 'ngNonBindable';
 
 export function preparseElement(ast: HtmlElementAst): PreparsedElement {
   var selectAttr = null;
@@ -17,14 +17,14 @@ export function preparseElement(ast: HtmlElementAst): PreparsedElement {
   var relAttr = null;
   var nonBindable = false;
   ast.attrs.forEach(attr => {
-    let attrName = attr.name.toLowerCase();
-    if (attrName == NG_CONTENT_SELECT_ATTR) {
+    let lcAttrName = attr.name.toLowerCase();
+    if (lcAttrName == NG_CONTENT_SELECT_ATTR) {
       selectAttr = attr.value;
-    } else if (attrName == LINK_STYLE_HREF_ATTR) {
+    } else if (lcAttrName == LINK_STYLE_HREF_ATTR) {
       hrefAttr = attr.value;
-    } else if (attrName == LINK_STYLE_REL_ATTR) {
+    } else if (lcAttrName == LINK_STYLE_REL_ATTR) {
       relAttr = attr.value;
-    } else if (attrName == NG_NON_BINDABLE_ATTR) {
+    } else if (attr.name == NG_NON_BINDABLE_ATTR) {
       nonBindable = true;
     }
   });

modules/angular2/src/core/change_detection/change_detector_ref.ts

@@ -73,7 +73,7 @@ export abstract class ChangeDetectorRef {
    * @Component({
    *   selector: 'giant-list',
    *   template: `
-   *     <li *ng-for="#d of dataProvider.data">Data {{d}}</lig>
+   *     <li *ngFor="#d of dataProvider.data">Data {{d}}</lig>
    *   `,
    *   directives: [NgFor]
    * })
@@ -179,7 +179,7 @@ export abstract class ChangeDetectorRef {
    *   selector: 'app',
    *   providers: [DataProvider],
    *   template: `
-   *     Live Update: <input type="checkbox" [(ng-model)]="live">
+   *     Live Update: <input type="checkbox" [(ngModel)]="live">
    *     <live-data [live]="live"><live-data>
    *   `,
    *   directives: [LiveData, FORM_DIRECTIVES]

modules/angular2/src/core/change_detection/parser/parser.ts

@@ -594,7 +594,7 @@ export class _ParseAST {
         if (prefix == null) {
           prefix = key;
         } else {
-          key = prefix + '-' + key;
+          key = prefix + key[0].toUpperCase() + key.substring(1);
         }
       }
       this.optionalCharacter($COLON);

modules/angular2/src/core/linker/interfaces.ts

@@ -109,7 +109,7 @@ export interface OnChanges { ngOnChanges(changes: {[key: string]: SimpleChange})
  *     <button (click)="hasChild = !hasChild">
  *       {{hasChild ? 'Destroy' : 'Create'}} MyComponent
  *     </button>
- *     <my-cmp *ng-if="hasChild"></my-cmp>`,
+ *     <my-cmp *ngIf="hasChild"></my-cmp>`,
  *   directives: [MyComponent, NgIf]
  * })
  * export class App {
@@ -150,7 +150,7 @@ export interface OnInit { ngOnInit(); }
  *   template: `
  *     <p>Changes:</p>
  *     <ul>
- *       <li *ng-for="#line of logs">{{line}}</li>
+ *       <li *ngFor="#line of logs">{{line}}</li>
  *     </ul>`,
  *   directives: [NgFor]
  * })
@@ -217,7 +217,7 @@ export interface DoCheck { ngDoCheck(); }
  *     <button (click)="hasChild = !hasChild">
  *       {{hasChild ? 'Destroy' : 'Create'}} MyComponent
  *     </button>
- *     <my-cmp *ng-if="hasChild"></my-cmp>`,
+ *     <my-cmp *ngIf="hasChild"></my-cmp>`,
  *   directives: [MyComponent, NgIf]
  * })
  * export class App {
@@ -367,7 +367,7 @@ export interface AfterContentInit { ngAfterContentInit(); }
  *   template: `
  *     <parent-cmp>
  *       <button (click)="hasContent = !hasContent">Toggle content child</button>
- *       <child-cmp *ng-if="hasContent" where="content"></child-cmp>
+ *       <child-cmp *ngIf="hasContent" where="content"></child-cmp>
  *     </parent-cmp>`,
  *   directives: [NgIf, ParentComponent, ChildComponent]
  * })
@@ -442,7 +442,7 @@ export interface AfterViewInit { ngAfterViewInit(); }
  *   selector: 'parent-cmp',
  *   template: `
  *     <button (click)="showView = !showView">Toggle view child</button>
- *     <child-cmp *ng-if="showView" where="view"></child-cmp>`,
+ *     <child-cmp *ngIf="showView" where="view"></child-cmp>`,
  *   directives: [NgIf, ChildComponent]
  * })
  * class ParentComponent implements AfterViewChecked {

modules/angular2/src/core/linker/query_list.ts

@@ -11,7 +11,7 @@ import {Observable, EventEmitter} from 'angular2/src/facade/async';
  *
  * Implements an iterable interface, therefore it can be used in both ES6
  * javascript `for (var i of items)` loops as well as in Angular templates with
- * `*ng-for="#i of myList"`.
+ * `*ngFor="#i of myList"`.
  *
  * Changes can be observed by subscribing to the changes `Observable`.
  *

modules/angular2/src/core/linker/view_ref.ts

@@ -50,7 +50,7 @@ export interface HostViewRef {
  * ```
  * Count: {{items.length}}
  * <ul>
- *   <li *ng-for="var item of items">{{item}}</li>
+ *   <li *ngFor="var item of items">{{item}}</li>
  * </ul>
  * ```
  *
@@ -60,7 +60,7 @@ export interface HostViewRef {
  * ```
  * Count: {{items.length}}
  * <ul>
- *   <template ng-for var-item [ng-for-of]="items"></template>
+ *   <template ngFor var-item [ngForOf]="items"></template>
  * </ul>
  * ```
  *
@@ -146,7 +146,7 @@ export class ViewRef_ extends ViewRef {
  * ```
  * Count: {{items.length}}
  * <ul>
- *   <li *ng-for="var item of items">{{item}}</li>
+ *   <li *ngFor="var item of items">{{item}}</li>
  * </ul>
  * ```
  *
@@ -156,7 +156,7 @@ export class ViewRef_ extends ViewRef {
  * ```
  * Count: {{items.length}}
  * <ul>
- *   <template ng-for var-item [ng-for-of]="items"></template>
+ *   <template ngFor var-item [ngForOf]="items"></template>
  * </ul>
  * ```
  *

modules/angular2/src/core/metadata.ts

@@ -732,8 +732,8 @@ export var Component: ComponentFactory =
  * A directive can also query for other child directives. Since parent directives are instantiated
  * before child directives, a directive can't simply inject the list of child directives. Instead,
  * the directive injects a {@link QueryList}, which updates its contents as children are added,
- * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an
- * `ng-if`, or an `ng-switch`.
+ * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ngFor`, an
+ * `ngIf`, or an `ngSwitch`.
  *
  * ```
  * @Directive({ selector: '[my-directive]' })
@@ -1007,7 +1007,7 @@ export var Attribute: AttributeFactory = makeParamDecorator(AttributeMetadata);
  * ```html
  * <tabs>
  *   <pane title="Overview">...</pane>
- *   <pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane>
+ *   <pane *ngFor="#o of objects" [title]="o.title">{{o.text}}</pane>
  * </tabs>
  * ```
  *
@@ -1026,7 +1026,7 @@ export var Attribute: AttributeFactory = makeParamDecorator(AttributeMetadata);
  *  selector: 'tabs',
  *  template: `
  *    <ul>
- *      <li *ng-for="#pane of panes">{{pane.title}}</li>
+ *      <li *ngFor="#pane of panes">{{pane.title}}</li>
  *    </ul>
  *    <content></content>
  *  `
@@ -1357,10 +1357,10 @@ export var Output: OutputFactory = makePropDecorator(OutputMetadata);
  * ### Example
  *
  * The following example creates a directive that sets the `valid` and `invalid` classes
- * on the DOM element that has ng-model directive on it.
+ * on the DOM element that has ngModel directive on it.
  *
  * ```typescript
- * @Directive({selector: '[ng-model]'})
+ * @Directive({selector: '[ngModel]'})
  * class NgModelStatus {
  *   constructor(public control:NgModel) {}
  *   @HostBinding('[class.valid]') get valid { return this.control.valid; }
@@ -1369,7 +1369,7 @@ export var Output: OutputFactory = makePropDecorator(OutputMetadata);
  *
  * @Component({
  *   selector: 'app',
- *   template: `<input [(ng-model)]="prop">`,
+ *   template: `<input [(ngModel)]="prop">`,
  *   directives: [FORM_DIRECTIVES, NgModelStatus]
  * })
  * class App {

modules/angular2/src/core/metadata/di.ts

@@ -55,7 +55,7 @@ export class AttributeMetadata extends DependencyMetadata {
  * ```html
  * <tabs>
  *   <pane title="Overview">...</pane>
- *   <pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane>
+ *   <pane *ngFor="#o of objects" [title]="o.title">{{o.text}}</pane>
  * </tabs>
  * ```
  *
@@ -74,7 +74,7 @@ export class AttributeMetadata extends DependencyMetadata {
  *  selector: 'tabs',
  *  template: `
  *    <ul>
- *      <li *ng-for="#pane of panes">{{pane.title}}</li>
+ *      <li *ngFor="#pane of panes">{{pane.title}}</li>
  *    </ul>
  *    <content></content>
  *  `

modules/angular2/src/core/metadata/directives.ts

@@ -186,8 +186,8 @@ import {ViewEncapsulation} from 'angular2/src/core/metadata/view';
  * A directive can also query for other child directives. Since parent directives are instantiated
  * before child directives, a directive can't simply inject the list of child directives. Instead,
  * the directive injects a {@link QueryList}, which updates its contents as children are added,
- * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an
- * `ng-if`, or an `ng-switch`.
+ * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ngFor`, an
+ * `ngIf`, or an `ngSwitch`.
  *
  * ```
  * @Directive({ selector: '[my-directive]' })
@@ -582,11 +582,11 @@ export class DirectiveMetadata extends InjectableMetadata {
    * ### Example ([live demo](http://plnkr.co/edit/gNg0ED?p=preview))
    *
    * The following example creates a directive that sets the `valid` and `invalid` classes
-   * on the DOM element that has ng-model directive on it.
+   * on the DOM element that has ngModel directive on it.
    *
    * ```typescript
    * @Directive({
-   *   selector: '[ng-model]',
+   *   selector: '[ngModel]',
    *   host: {
    *     '[class.valid]': 'valid',
    *     '[class.invalid]': 'invalid'
@@ -600,7 +600,7 @@ export class DirectiveMetadata extends InjectableMetadata {
    *
    * @Component({
    *   selector: 'app',
-   *   template: `<input [(ng-model)]="prop">`,
+   *   template: `<input [(ngModel)]="prop">`,
    *   directives: [FORM_DIRECTIVES, NgModelStatus]
    * })
    * class App {
@@ -1085,10 +1085,10 @@ export class OutputMetadata {
  * ### Example
  *
  * The following example creates a directive that sets the `valid` and `invalid` classes
- * on the DOM element that has ng-model directive on it.
+ * on the DOM element that has ngModel directive on it.
  *
  * ```typescript
- * @Directive({selector: '[ng-model]'})
+ * @Directive({selector: '[ngModel]'})
  * class NgModelStatus {
  *   constructor(public control:NgModel) {}
  *   @HostBinding('[class.valid]') get valid { return this.control.valid; }
@@ -1097,7 +1097,7 @@ export class OutputMetadata {
  *
  * @Component({
  *   selector: 'app',
- *   template: `<input [(ng-model)]="prop">`,
+ *   template: `<input [(ngModel)]="prop">`,
  *   directives: [FORM_DIRECTIVES, NgModelStatus]
  * })
  * class App {

modules/angular2/src/core/metadata/view.ts

@@ -104,7 +104,7 @@ export class ViewMetadata {
    *   directives: [NgFor]
    *   template: '
    *   <ul>
-   *     <li *ng-for="#item of items">{{item}}</li>
+   *     <li *ngFor="#item of items">{{item}}</li>
    *   </ul>'
    * })
    * class MyComponent {

modules/angular2/src/core/render/api.ts

@@ -33,7 +33,7 @@ export class RenderProtoViewRef {}
 
   <div>foo</div> -> view 1 / fragment 1
   <ul>
-    <template ng-for>
+    <template ngFor>
       <li>{{fg}}</li> -> view 2 / fragment 1
     </template>
   </ul>
@@ -42,10 +42,10 @@ export class RenderProtoViewRef {}
 
   <div>foo</div> -> view 1 / fragment 1
   <ul>
-    <template ng-if>
+    <template ngIf>
       <li><ng-content></></li> -> view 1 / fragment 2
     </template>
-    <template ng-for>
+    <template ngFor>
       <li><ng-content></></li> ->
       <li></li>                -> view 1 / fragment 2 + view 2 / fragment 1..n-1
     </template>

modules/angular2/src/core/zone/ng_zone.ts

@@ -42,7 +42,7 @@ export class NgZoneError {
  *     <h2>Demo: NgZone</h2>
  *
  *     <p>Progress: {{progress}}%</p>
- *     <p *ng-if="progress >= 100">Done processing {{label}} of Angular zone!</p>
+ *     <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
  *
  *     <button (click)="processWithinAngularZone()">Process within Angular zone</button>
  *     <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>

modules/angular2/src/platform/dom/dom_renderer.ts

@@ -39,7 +39,6 @@ import {
   DefaultRenderFragmentRef,
   DefaultProtoViewRef
 } from 'angular2/src/core/render/view';
-import {camelCaseToDashCase} from './util';
 import {ViewEncapsulation} from 'angular2/src/core/metadata';
 
 // TODO move it once DomAdapter is moved
@@ -139,11 +138,10 @@ export abstract class DomRenderer extends Renderer implements NodeFactory<Node>
                       attributeValue: string): void {
     var view = resolveInternalDomView(location.renderView);
     var element = view.boundElements[location.boundElementIndex];
-    var dashCasedAttributeName = camelCaseToDashCase(attributeName);
     if (isPresent(attributeValue)) {
-      DOM.setAttribute(element, dashCasedAttributeName, stringify(attributeValue));
+      DOM.setAttribute(element, attributeName, stringify(attributeValue));
     } else {
-      DOM.removeAttribute(element, dashCasedAttributeName);
+      DOM.removeAttribute(element, attributeName);
     }
   }
 
@@ -160,11 +158,10 @@ export abstract class DomRenderer extends Renderer implements NodeFactory<Node>
   setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void {
     var view = resolveInternalDomView(location.renderView);
     var element = view.boundElements[location.boundElementIndex];
-    var dashCasedStyleName = camelCaseToDashCase(styleName);
     if (isPresent(styleValue)) {
-      DOM.setStyle(element, dashCasedStyleName, stringify(styleValue));
+      DOM.setStyle(element, styleName, stringify(styleValue));
     } else {
-      DOM.removeStyle(element, dashCasedStyleName);
+      DOM.removeStyle(element, styleName);
     }
   }
 

modules/angular2/src/router/router_link.ts

@@ -20,7 +20,7 @@ import {Instruction} from './instruction';
  * When linking to this `User` route, you can write:
  *
  * ```
- * <a [router-link]="['./User']">link to user component</a>
+ * <a [routerLink]="['./User']">link to user component</a>
  * ```
  *
  * RouterLink expects the value to be an array of route names, followed by the params
@@ -35,7 +35,7 @@ import {Instruction} from './instruction';
  * current component's parent.
  */
 @Directive({
-  selector: '[router-link]',
+  selector: '[routerLink]',
   inputs: ['routeParams: routerLink', 'target: target'],
   host: {
     '(click)': 'onClick()',

modules/angular2/test/common/directives/ng_class_spec.ts

@@ -34,7 +34,7 @@ export function main() {
 
       it('should clean up when the directive is destroyed',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div *ng-for="var item of items" [ng-class]="item"></div>';
+           var template = '<div *ngFor="var item of items" [ngClass]="item"></div>';
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
                .then((fixture) => {
@@ -54,7 +54,7 @@ export function main() {
 
       it('should add classes specified in an object literal',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="{foo: true, bar: false}"></div>';
+           var template = '<div [ngClass]="{foo: true, bar: false}"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -67,7 +67,7 @@ export function main() {
 
       it('should add classes specified in an object literal without change in class names',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div [ng-class]="{'foo-bar': true, 'fooBar': true}"></div>`;
+           var template = `<div [ngClass]="{'foo-bar': true, 'fooBar': true}"></div>`;
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -79,7 +79,7 @@ export function main() {
 
       it('should add and remove classes based on changes in object literal values',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="{foo: condition, bar: !condition}"></div>';
+           var template = '<div [ngClass]="{foo: condition, bar: !condition}"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -95,7 +95,7 @@ export function main() {
 
       it('should add and remove classes based on changes to the expression object',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="objExpr"></div>';
+           var template = '<div [ngClass]="objExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -117,7 +117,7 @@ export function main() {
 
       it('should add and remove classes based on reference changes to the expression object',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="objExpr"></div>';
+           var template = '<div [ngClass]="objExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -136,7 +136,7 @@ export function main() {
 
       it('should remove active classes when expression evaluates to null',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="objExpr"></div>';
+           var template = '<div [ngClass]="objExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -156,7 +156,7 @@ export function main() {
 
       it('should allow multiple classes per expression',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="objExpr"></div>';
+           var template = '<div [ngClass]="objExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -181,7 +181,7 @@ export function main() {
 
       it('should split by one or more spaces between classes',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="objExpr"></div>';
+           var template = '<div [ngClass]="objExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -200,7 +200,7 @@ export function main() {
 
       it('should add classes specified in a list literal',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div [ng-class]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
+           var template = `<div [ngClass]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -212,7 +212,7 @@ export function main() {
 
       it('should add and remove classes based on changes to the expression',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="arrExpr"></div>';
+           var template = '<div [ngClass]="arrExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -235,7 +235,7 @@ export function main() {
 
       it('should add and remove classes when a reference changes',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="arrExpr"></div>';
+           var template = '<div [ngClass]="arrExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -251,7 +251,7 @@ export function main() {
 
       it('should take initial classes into account when a reference changes',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div class="foo" [ng-class]="arrExpr"></div>';
+           var template = '<div class="foo" [ngClass]="arrExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -267,7 +267,7 @@ export function main() {
 
       it('should ignore empty or blank class names',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div class="foo" [ng-class]="arrExpr"></div>';
+           var template = '<div class="foo" [ngClass]="arrExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -282,7 +282,7 @@ export function main() {
 
       it('should trim blanks from class names',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div class="foo" [ng-class]="arrExpr"></div>';
+           var template = '<div class="foo" [ngClass]="arrExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -298,7 +298,7 @@ export function main() {
 
       it('should allow multiple classes per item in arrays',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="arrExpr"></div>';
+           var template = '<div [ngClass]="arrExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -320,7 +320,7 @@ export function main() {
 
       it('should add and remove classes if the set instance changed',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="setExpr"></div>';
+           var template = '<div [ngClass]="setExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -343,7 +343,7 @@ export function main() {
 
       it('should add classes specified in a string literal',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div [ng-class]="'foo bar foo-bar fooBar'"></div>`;
+           var template = `<div [ngClass]="'foo bar foo-bar fooBar'"></div>`;
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -355,7 +355,7 @@ export function main() {
 
       it('should add and remove classes based on changes to the expression',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="strExpr"></div>';
+           var template = '<div [ngClass]="strExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -375,7 +375,7 @@ export function main() {
 
       it('should remove active classes when switching from string to null',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div [ng-class]="strExpr"></div>`;
+           var template = `<div [ngClass]="strExpr"></div>`;
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -391,7 +391,7 @@ export function main() {
 
       it('should take initial classes into account when switching from string to null',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div class="foo" [ng-class]="strExpr"></div>`;
+           var template = `<div class="foo" [ngClass]="strExpr"></div>`;
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -407,7 +407,7 @@ export function main() {
 
       it('should ignore empty and blank strings',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div class="foo" [ng-class]="strExpr"></div>`;
+           var template = `<div class="foo" [ngClass]="strExpr"></div>`;
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -425,7 +425,7 @@ export function main() {
 
       it('should co-operate with the class attribute',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div [ng-class]="objExpr" class="init foo"></div>';
+           var template = '<div [ngClass]="objExpr" class="init foo"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -445,7 +445,7 @@ export function main() {
 
       it('should co-operate with the interpolated class attribute',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div [ng-class]="objExpr" class="{{'init foo'}}"></div>`;
+           var template = `<div [ngClass]="objExpr" class="{{'init foo'}}"></div>`;
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -465,7 +465,7 @@ export function main() {
 
       it('should co-operate with the class attribute and binding to it',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = `<div [ng-class]="objExpr" class="init" [class]="'foo'"></div>`;
+           var template = `<div [ngClass]="objExpr" class="init" [class]="'foo'"></div>`;
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -486,7 +486,7 @@ export function main() {
       it('should co-operate with the class attribute and class.name binding',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template =
-               '<div class="init foo" [ng-class]="objExpr" [class.baz]="condition"></div>';
+               '<div class="init foo" [ngClass]="objExpr" [class.baz]="condition"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
@@ -508,7 +508,7 @@ export function main() {
 
       it('should co-operate with initial class and class attribute binding when binding changes',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template = '<div class="init" [ng-class]="objExpr" [class]="strExpr"></div>';
+           var template = '<div class="init" [ngClass]="objExpr" [class]="strExpr"></div>';
 
            tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)

modules/angular2/test/common/directives/ng_for_spec.ts

@@ -19,9 +19,9 @@ import {NgFor} from 'angular2/src/common/directives/ng_for';
 
 
 export function main() {
-  describe('ng-for', () => {
+  describe('ngFor', () => {
     var TEMPLATE =
-        '<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>';
+        '<div><copy-me template="ngFor #item of items">{{item.toString()}};</copy-me></div>';
 
     it('should reflect initial elements',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
@@ -98,7 +98,7 @@ export function main() {
 
     it('should iterate over an array of objects',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>';
+         var template = '<ul><li template="ngFor #item of items">{{item["name"]}};</li></ul>';
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
@@ -128,7 +128,7 @@ export function main() {
 
     it('should gracefully handle nulls',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<ul><li template="ng-for #item of null">{{item}};</li></ul>';
+         var template = '<ul><li template="ngFor #item of null">{{item}};</li></ul>';
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
              .then((fixture) => {
@@ -187,8 +187,8 @@ export function main() {
     it('should repeat over nested arrays',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div>' +
-                        '<div template="ng-for #item of items">' +
-                        '<div template="ng-for #subitem of item">' +
+                        '<div template="ngFor #item of items">' +
+                        '<div template="ngFor #subitem of item">' +
                         '{{subitem}}-{{item.length}};' +
                         '</div>|' +
                         '</div>' +
@@ -213,8 +213,8 @@ export function main() {
 
     it('should repeat over nested arrays with no intermediate element',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div><template ng-for #item [ng-for-of]="items">' +
-                        '<div template="ng-for #subitem of item">' +
+         var template = '<div><template ngFor #item [ngForOf]="items">' +
+                        '<div template="ngFor #subitem of item">' +
                         '{{subitem}}-{{item.length}};' +
                         '</div></template></div>';
 
@@ -235,7 +235,7 @@ export function main() {
     it('should display indices correctly',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template =
-             '<div><copy-me template="ng-for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
+             '<div><copy-me template="ngFor: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
@@ -254,7 +254,7 @@ export function main() {
     it('should display last item correctly',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template =
-             '<div><copy-me template="ng-for: var item of items; var isLast=last">{{isLast.toString()}}</copy-me></div>';
+             '<div><copy-me template="ngFor: var item of items; var isLast=last">{{isLast.toString()}}</copy-me></div>';
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
@@ -273,7 +273,7 @@ export function main() {
     it('should display even items correctly',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template =
-             '<div><copy-me template="ng-for: var item of items; var isEven=even">{{isEven.toString()}}</copy-me></div>';
+             '<div><copy-me template="ngFor: var item of items; var isEven=even">{{isEven.toString()}}</copy-me></div>';
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
@@ -292,7 +292,7 @@ export function main() {
     it('should display odd items correctly',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template =
-             '<div><copy-me template="ng-for: var item of items; var isOdd=odd">{{isOdd.toString()}}</copy-me></div>';
+             '<div><copy-me template="ngFor: var item of items; var isOdd=odd">{{isOdd.toString()}}</copy-me></div>';
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
@@ -312,7 +312,7 @@ export function main() {
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          tcb.overrideTemplate(
                 TestComponent,
-                '<ul><template ng-for [ng-for-of]="items" [ng-for-template]="contentTpl"></template></ul>')
+                '<ul><template ngFor [ngForOf]="items" [ngForTemplate]="contentTpl"></template></ul>')
              .overrideTemplate(
                  ComponentUsingTestComponent,
                  '<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
@@ -329,8 +329,8 @@ export function main() {
 
     it('should use a default template if a custom one is null',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, `<ul><template ng-for #item [ng-for-of]="items"
-         [ng-for-template]="contentTpl" #i="index">{{i}}: {{item}};</template></ul>`)
+         tcb.overrideTemplate(TestComponent, `<ul><template ngFor #item [ngForOf]="items"
+         [ngForTemplate]="contentTpl" #i="index">{{i}}: {{item}};</template></ul>`)
              .overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>')
              .createAsync(ComponentUsingTestComponent)
              .then((fixture) => {
@@ -345,8 +345,8 @@ export function main() {
 
     it('should use a custom template when both default and a custom one are present',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         tcb.overrideTemplate(TestComponent, `<ul><template ng-for #item [ng-for-of]="items"
-         [ng-for-template]="contentTpl" #i="index">{{i}}=> {{item}};</template></ul>`)
+         tcb.overrideTemplate(TestComponent, `<ul><template ngFor #item [ngForOf]="items"
+         [ngForTemplate]="contentTpl" #i="index">{{i}}=> {{item}};</template></ul>`)
              .overrideTemplate(
                  ComponentUsingTestComponent,
                  '<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')

modules/angular2/test/common/directives/ng_if_spec.ts

@@ -20,10 +20,10 @@ import {NgIf} from 'angular2/common';
 import {IS_DART} from 'angular2/src/facade/lang';
 
 export function main() {
-  describe('ng-if directive', () => {
+  describe('ngIf directive', () => {
     it('should work in a template attribute',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
+         var html = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
 
          tcb.overrideTemplate(TestComponent, html)
              .createAsync(TestComponent)
@@ -39,7 +39,7 @@ export function main() {
     it('should work in a template element',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var html =
-             '<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
+             '<div><template [ngIf]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
 
          tcb.overrideTemplate(TestComponent, html)
              .createAsync(TestComponent)
@@ -54,7 +54,7 @@ export function main() {
 
     it('should toggle node when condition changes',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
+         var html = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
 
          tcb.overrideTemplate(TestComponent, html)
              .createAsync(TestComponent)
@@ -84,7 +84,7 @@ export function main() {
     it('should handle nested if correctly',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var html =
-             '<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>';
+             '<div><template [ngIf]="booleanCondition"><copy-me *ngIf="nestedBooleanCondition">hello</copy-me></template></div>';
 
          tcb.overrideTemplate(TestComponent, html)
              .createAsync(TestComponent)
@@ -127,9 +127,9 @@ export function main() {
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var html =
              '<div>' +
-             '<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
-             '<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
-             '<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
+             '<copy-me template="ngIf numberCondition + 1 >= 2">helloNumber</copy-me>' +
+             '<copy-me template="ngIf stringCondition == \'foo\'">helloString</copy-me>' +
+             '<copy-me template="ngIf functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
              '</div>';
 
          tcb.overrideTemplate(TestComponent, html)
@@ -161,7 +161,7 @@ export function main() {
     if (!IS_DART) {
       it('should not add the element twice if the condition goes from true to true (JS)',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
+           var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
 
            tcb.overrideTemplate(TestComponent, html)
                .createAsync(TestComponent)
@@ -183,7 +183,7 @@ export function main() {
 
       it('should not recreate the element if the condition goes from true to true (JS)',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
+           var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
 
            tcb.overrideTemplate(TestComponent, html)
                .createAsync(TestComponent)
@@ -207,7 +207,7 @@ export function main() {
     if (IS_DART) {
       it('should not create the element if the condition is not a boolean (DART)',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
+           var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
 
            tcb.overrideTemplate(TestComponent, html)
                .createAsync(TestComponent)

modules/angular2/test/common/directives/ng_style_spec.ts

@@ -26,7 +26,7 @@ export function main() {
 
     it('should add styles specified in an object literal',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div [ng-style]="{'max-width': '40px'}"></div>`;
+         var template = `<div [ngStyle]="{'max-width': '40px'}"></div>`;
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
@@ -42,7 +42,7 @@ export function main() {
 
     it('should add and change styles specified in an object expression',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div [ng-style]="expr"></div>`;
+         var template = `<div [ngStyle]="expr"></div>`;
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
@@ -68,7 +68,7 @@ export function main() {
 
     it('should remove styles when deleting a key in an object expression',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div [ng-style]="expr"></div>`;
+         var template = `<div [ngStyle]="expr"></div>`;
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
@@ -91,7 +91,7 @@ export function main() {
 
     it('should co-operate with the style attribute',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div style="font-size: 12px" [ng-style]="expr"></div>`;
+         var template = `<div style="font-size: 12px" [ngStyle]="expr"></div>`;
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
@@ -120,7 +120,7 @@ export function main() {
 
     it('should co-operate with the style.[styleName]="expr" special-case in the compiler',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = `<div [style.font-size.px]="12" [ng-style]="expr"></div>`;
+         var template = `<div [style.font-size.px]="12" [ngStyle]="expr"></div>`;
 
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)

modules/angular2/test/common/directives/ng_switch_spec.ts

@@ -22,9 +22,9 @@ export function main() {
       it('should switch amongst when values',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div>' +
-                          '<ul [ng-switch]="switchValue">' +
-                          '<template ng-switch-when="a"><li>when a</li></template>' +
-                          '<template ng-switch-when="b"><li>when b</li></template>' +
+                          '<ul [ngSwitch]="switchValue">' +
+                          '<template ngSwitchWhen="a"><li>when a</li></template>' +
+                          '<template ngSwitchWhen="b"><li>when b</li></template>' +
                           '</ul></div>';
 
            tcb.overrideTemplate(TestComponent, template)
@@ -48,9 +48,9 @@ export function main() {
       it('should switch amongst when values with fallback to default',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div>' +
-                          '<ul [ng-switch]="switchValue">' +
-                          '<li template="ng-switch-when \'a\'">when a</li>' +
-                          '<li template="ng-switch-default">when default</li>' +
+                          '<ul [ngSwitch]="switchValue">' +
+                          '<li template="ngSwitchWhen \'a\'">when a</li>' +
+                          '<li template="ngSwitchDefault">when default</li>' +
                           '</ul></div>';
 
            tcb.overrideTemplate(TestComponent, template)
@@ -74,13 +74,13 @@ export function main() {
       it('should support multiple whens with the same value',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div>' +
-                          '<ul [ng-switch]="switchValue">' +
-                          '<template ng-switch-when="a"><li>when a1;</li></template>' +
-                          '<template ng-switch-when="b"><li>when b1;</li></template>' +
-                          '<template ng-switch-when="a"><li>when a2;</li></template>' +
-                          '<template ng-switch-when="b"><li>when b2;</li></template>' +
-                          '<template ng-switch-default><li>when default1;</li></template>' +
-                          '<template ng-switch-default><li>when default2;</li></template>' +
+                          '<ul [ngSwitch]="switchValue">' +
+                          '<template ngSwitchWhen="a"><li>when a1;</li></template>' +
+                          '<template ngSwitchWhen="b"><li>when b1;</li></template>' +
+                          '<template ngSwitchWhen="a"><li>when a2;</li></template>' +
+                          '<template ngSwitchWhen="b"><li>when b2;</li></template>' +
+                          '<template ngSwitchDefault><li>when default1;</li></template>' +
+                          '<template ngSwitchDefault><li>when default2;</li></template>' +
                           '</ul></div>';
 
            tcb.overrideTemplate(TestComponent, template)
@@ -107,10 +107,10 @@ export function main() {
       it('should switch amongst when values',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div>' +
-                          '<ul [ng-switch]="switchValue">' +
-                          '<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
-                          '<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
-                          '<template ng-switch-default><li>when default;</li></template>' +
+                          '<ul [ngSwitch]="switchValue">' +
+                          '<template [ngSwitchWhen]="when1"><li>when 1;</li></template>' +
+                          '<template [ngSwitchWhen]="when2"><li>when 2;</li></template>' +
+                          '<template ngSwitchDefault><li>when default;</li></template>' +
                           '</ul></div>';
 
            tcb.overrideTemplate(TestComponent, template)

modules/angular2/test/common/directives/non_bindable_spec.ts

@@ -19,7 +19,7 @@ export function main() {
   describe('non-bindable', () => {
     it('should not interpolate children',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>';
+         var template = '<div>{{text}}<span ngNonBindable>{{text}}</span></div>';
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
              .then((fixture) => {
@@ -31,7 +31,7 @@ export function main() {
 
     it('should ignore directives on child nodes',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
+         var template = '<div ngNonBindable><span id=child test-dec>{{text}}</span></div>';
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
              .then((fixture) => {
@@ -47,7 +47,7 @@ export function main() {
 
     it('should trigger directives on the same node',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
+         var template = '<div><span id=child ngNonBindable test-dec>{{text}}</span></div>';
          tcb.overrideTemplate(TestComponent, template)
              .createAsync(TestComponent)
              .then((fixture) => {

modules/angular2/test/common/forms/integration_spec.ts

@@ -45,8 +45,8 @@ export function main() {
 
     it("should initialize DOM elements with the given form object",
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
+         var t = `<div [ngFormModel]="form">
+                <input type="text" ngControl="login">
                </div>`;
 
          tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -64,8 +64,8 @@ export function main() {
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var form = new ControlGroup({"login": new Control("oldValue")});
 
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
+         var t = `<div [ngFormModel]="form">
+                <input type="text" ngControl="login">
               </div>`;
 
          tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -85,8 +85,8 @@ export function main() {
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var form = new ControlGroup({"login": new Control("oldValue")});
 
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
+         var t = `<div [ngFormModel]="form">
+                <input type="text" ngControl="login">
               </div>`;
 
          tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -104,11 +104,10 @@ export function main() {
          });
        }));
 
-
-    it("should emit ng-submit event on submit",
+    it("should emit ngSubmit event on submit",
        inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                 var t = `<div>
-                      <form [ng-form-model]="form" (ng-submit)="name='updated'"></form>
+                      <form [ngFormModel]="form" (ngSubmit)="name='updated'"></form>
                       <span>{{name}}</span>
                     </div>`;
 
@@ -134,7 +133,7 @@ export function main() {
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var control = new Control("loginValue");
 
-         var t = `<div><input type="text" [ng-form-control]="form"></div>`;
+         var t = `<div><input type="text" [ngFormControl]="form"></div>`;
 
          tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
            fixture.debugElement.componentInstance.form = control;
@@ -153,8 +152,8 @@ export function main() {
 
     it("should update DOM elements when rebinding the control group",
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
+         var t = `<div [ngFormModel]="form">
+                <input type="text" ngControl="login">
                </div>`;
 
          tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -177,8 +176,8 @@ export function main() {
          var login = new Control("oldValue");
          var form = new ControlGroup({"login": login});
 
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
+         var t = `<div [ngFormModel]="form">
+                <input type="text" ngControl="login">
                </div>`;
 
          tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -200,8 +199,8 @@ export function main() {
          var login = new Control("oldValue");
          var form = new ControlGroup({"login": login});
 
-         var t = `<div [ng-form-model]="form">
-                <input type="text" ng-control="login">
+         var t = `<div [ngFormModel]="form">
+                <input type="text" ngControl="login">
                </div>`;
 
          tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -222,8 +221,8 @@ export function main() {
     describe("different control types", () => {
       it("should support <input type=text>",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <input type="text" ng-control="text">
+           var t = `<div [ngFormModel]="form">
+                  <input type="text" ngControl="text">
                 </div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -244,8 +243,8 @@ export function main() {
 
       it("should support <input> without type",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <input ng-control="text">
+           var t = `<div [ngFormModel]="form">
+                  <input ngControl="text">
                 </div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -265,8 +264,8 @@ export function main() {
 
       it("should support <textarea>",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <textarea ng-control="text"></textarea>
+           var t = `<div [ngFormModel]="form">
+                  <textarea ngControl="text"></textarea>
                 </div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -287,8 +286,8 @@ export function main() {
 
       it("should support <type=checkbox>",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <input type="checkbox" ng-control="checkbox">
+           var t = `<div [ngFormModel]="form">
+                  <input type="checkbox" ngControl="checkbox">
                 </div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -309,8 +308,8 @@ export function main() {
 
       it("should support <type=number>",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <input type="number" ng-control="num">
+           var t = `<div [ngFormModel]="form">
+                  <input type="number" ngControl="num">
                 </div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -331,8 +330,8 @@ export function main() {
 
       it("should support <select>",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                    <select ng-control="city">
+           var t = `<div [ngFormModel]="form">
+                    <select ngControl="city">
                       <option value="SF"></option>
                       <option value="NYC"></option>
                     </select>
@@ -359,9 +358,9 @@ export function main() {
 
       it("should support <select> with a dynamic list of options",
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<div [ng-form-model]="form">
-                      <select ng-control="city">
-                        <option *ng-for="#c of data" [value]="c"></option>
+                  var t = `<div [ngFormModel]="form">
+                      <select ngControl="city">
+                        <option *ngFor="#c of data" [value]="c"></option>
                       </select>
                   </div>`;
 
@@ -382,8 +381,8 @@ export function main() {
 
       it("should support custom value accessors",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <input type="text" ng-control="name" wrapped-value>
+           var t = `<div [ngFormModel]="form">
+                  <input type="text" ngControl="name" wrapped-value>
                 </div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -403,8 +402,8 @@ export function main() {
 
       it("should support custom value accessors on non builtin input elements that fire a change event without a 'target' property",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div [ng-form-model]="form">
-                  <my-input ng-control="name"></my-input>
+           var t = `<div [ngFormModel]="form">
+                  <my-input ngControl="name"></my-input>
                 </div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -431,10 +430,10 @@ export function main() {
            var form = new ControlGroup(
                {"login": new Control(""), "min": new Control(""), "max": new Control("")});
 
-           var t = `<div [ng-form-model]="form" login-is-empty-validator>
-                    <input type="text" ng-control="login" required>
-                    <input type="text" ng-control="min" minlength="3">
-                    <input type="text" ng-control="max" maxlength="3">
+           var t = `<div [ngFormModel]="form" login-is-empty-validator>
+                    <input type="text" ngControl="login" required>
+                    <input type="text" ngControl="min" minlength="3">
+                    <input type="text" ngControl="max" maxlength="3">
                  </div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -475,8 +474,8 @@ export function main() {
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                   var form = new ControlGroup({"login": new Control("")});
 
-                  var t = `<div [ng-form-model]="form">
-                    <input type="text" ng-control="login" uniq-login-validator="expected">
+                  var t = `<div [ngFormModel]="form">
+                    <input type="text" ngControl="login" uniq-login-validator="expected">
                  </div>`;
 
                   var rootTC;
@@ -504,8 +503,8 @@ export function main() {
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var form = new ControlGroup({"login": new Control("aa", Validators.required)});
 
-           var t = `<div [ng-form-model]="form">
-                  <input type="text" ng-control="login">
+           var t = `<div [ngFormModel]="form">
+                  <input type="text" ngControl="login">
                  </div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -529,8 +528,8 @@ export function main() {
                       new Control("", Validators.required, uniqLoginAsyncValidator("expected"));
                   var form = new ControlGroup({"login": control});
 
-                  var t = `<div [ng-form-model]="form">
-                  <input type="text" ng-control="login">
+                  var t = `<div [ngFormModel]="form">
+                  <input type="text" ngControl="login">
                  </div>`;
 
                   var fixture;
@@ -566,9 +565,9 @@ export function main() {
            var form =
                new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
 
-           var t = `<div [ng-form-model]="form">
-                  <div ng-control-group="nested">
-                    <input type="text" ng-control="login">
+           var t = `<div [ngFormModel]="form">
+                  <div ngControlGroup="nested">
+                    <input type="text" ngControl="login">
                   </div>
               </div>`;
 
@@ -587,9 +586,9 @@ export function main() {
            var form =
                new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
 
-           var t = `<div [ng-form-model]="form">
-                    <div ng-control-group="nested">
-                      <input type="text" ng-control="login">
+           var t = `<div [ngFormModel]="form">
+                    <div ngControlGroup="nested">
+                      <input type="text" ngControl="login">
                     </div>
                 </div>`;
 
@@ -607,13 +606,13 @@ export function main() {
          }));
     });
 
-    it("should support ng-model for complex forms",
+    it("should support ngModel for complex forms",
        inject(
            [TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
              var form = new ControlGroup({"name": new Control("")});
 
              var t =
-                 `<div [ng-form-model]="form"><input type="text" ng-control="name" [(ng-model)]="name"></div>`;
+                 `<div [ngFormModel]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
 
              var fixture: ComponentFixture;
              tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
@@ -634,12 +633,11 @@ export function main() {
              expect(fixture.debugElement.componentInstance.name).toEqual("updatedValue");
            })));
 
-    it("should support ng-model for single fields",
+    it("should support ngModel for single fields",
        inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                 var form = new Control("");
 
-                var t =
-                    `<div><input type="text" [ng-form-control]="form" [(ng-model)]="name"></div>`;
+                var t = `<div><input type="text" [ngFormControl]="form" [(ngModel)]="name"></div>`;
 
                 var fixture: ComponentFixture;
                 tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
@@ -663,8 +661,8 @@ export function main() {
       it("should add new controls and control groups",
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                   var t = `<form>
-                     <div ng-control-group="user">
-                      <input type="text" ng-control="login">
+                     <div ngControlGroup="user">
+                      <input type="text" ngControl="login">
                      </div>
                </form>`;
 
@@ -684,9 +682,9 @@ export function main() {
                   expect(form.controls['user'].controls['login']).toBeDefined();
                 })));
 
-      it("should emit ng-submit event on submit",
+      it("should emit ngSubmit event on submit",
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<div><form (ng-submit)="name='updated'"></form></div>`;
+                  var t = `<div><form (ngSubmit)="name='updated'"></form></div>`;
 
                   var fixture: ComponentFixture;
                   tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
@@ -701,9 +699,9 @@ export function main() {
                   expect(fixture.debugElement.componentInstance.name).toEqual("updated");
                 })));
 
-      it("should not create a template-driven form when ng-no-form is used",
+      it("should not create a template-driven form when ngNoForm is used",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<form ng-no-form>
+           var t = `<form ngNoForm>
                </form>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@@ -718,8 +716,8 @@ export function main() {
       it("should remove controls",
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                   var t = `<form>
-                    <div *ng-if="name == 'show'">
-                      <input type="text" ng-control="login">
+                    <div *ngIf="name == 'show'">
+                      <input type="text" ngControl="login">
                     </div>
                   </form>`;
 
@@ -745,8 +743,8 @@ export function main() {
       it("should remove control groups",
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                   var t = `<form>
-                     <div *ng-if="name=='show'" ng-control-group="user">
-                      <input type="text" ng-control="login">
+                     <div *ngIf="name=='show'" ngControlGroup="user">
+                      <input type="text" ngControl="login">
                      </div>
                </form>`;
 
@@ -769,10 +767,10 @@ export function main() {
                   expect(form.controls['user']).not.toBeDefined();
                 })));
 
-      it("should support ng-model for complex forms",
+      it("should support ngModel for complex forms",
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                   var t = `<form>
-                      <input type="text" ng-control="name" [(ng-model)]="name">
+                      <input type="text" ngControl="name" [(ngModel)]="name">
                </form>`;
 
                   var fixture: ComponentFixture;
@@ -794,9 +792,9 @@ export function main() {
                 })));
 
 
-      it("should support ng-model for single fields",
+      it("should support ngModel for single fields",
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<div><input type="text" [(ng-model)]="name"></div>`;
+                  var t = `<div><input type="text" [(ngModel)]="name"></div>`;
 
                   var fixture: ComponentFixture;
                   tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
@@ -822,7 +820,7 @@ export function main() {
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var form = new Control("", Validators.required);
 
-           var t = `<div><input type="text" [ng-form-control]="form"></div>`;
+           var t = `<div><input type="text" [ngFormControl]="form"></div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
              fixture.debugElement.componentInstance.form = form;
@@ -849,7 +847,7 @@ export function main() {
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var form = new ControlGroup({"name": new Control("", Validators.required)});
 
-           var t = `<form [ng-form-model]="form"><input type="text" ng-control="name"></form>`;
+           var t = `<form [ngFormModel]="form"><input type="text" ngControl="name"></form>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
              fixture.debugElement.componentInstance.form = form;
@@ -872,9 +870,9 @@ export function main() {
            });
          }));
 
-      it("should work with ng-model",
+      it("should work with ngModel",
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var t = `<div><input [(ng-model)]="name" required></div>`;
+           var t = `<div><input [(ngModel)]="name" required></div>`;
 
            tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
              fixture.debugElement.componentInstance.name = "";
@@ -898,13 +896,13 @@ export function main() {
          }));
     });
 
-    describe("ng-model corner cases", () => {
+    describe("ngModel corner cases", () => {
       it("should not update the view when the value initially came from the view",
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                   var form = new Control("");
 
                   var t =
-                      `<div><input type="text" [ng-form-control]="form" [(ng-model)]="name"></div>`;
+                      `<div><input type="text" [ngFormControl]="form" [(ngModel)]="name"></div>`;
                   var fixture: ComponentFixture;
                   tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
                       (root) => { fixture = root; });
@@ -933,7 +931,7 @@ export function main() {
 
       it("should update the view when the model is set back to what used to be in the view",
          inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                  var t = `<input type="text" [(ng-model)]="name">`;
+                  var t = `<input type="text" [(ngModel)]="name">`;
                   var fixture: ComponentFixture;
                   tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
                       (root) => { fixture = root; });
@@ -968,8 +966,8 @@ export function main() {
                   // {{x.valid}} used to crash because valid() tried to read a property
                   // from form.control before it was set. This test verifies this bug is
                   // fixed.
-                  var t = `<form><div ng-control-group="x" #x="ngForm">
-                  <input type="text" ng-control="test"></div>{{x.valid}}</form>`;
+                  var t = `<form><div ngControlGroup="x" #x="ngForm">
+                  <input type="text" ngControl="test"></div>{{x.valid}}</form>`;
                   var fixture: ComponentFixture;
                   tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
                       (root) => { fixture = root; });

modules/angular2/test/compiler/change_definition_factory_spec.ts

@@ -73,7 +73,7 @@ export function main() {
     }
 
     it('should watch element properties', () => {
-      var changeDetector = createChangeDetector('<div [el-prop]="someProp">', [], 0);
+      var changeDetector = createChangeDetector('<div [elProp]="someProp">', [], 0);
 
       context.someProp = 'someValue';
       changeDetector.detectChanges();
@@ -119,7 +119,7 @@ export function main() {
     });
 
     it('should watch variables', () => {
-      var changeDetector = createChangeDetector('<div #some-var [el-prop]="someVar">', [], 0);
+      var changeDetector = createChangeDetector('<div #someVar [elProp]="someVar">', [], 0);
 
       locals.set('someVar', 'someValue');
       changeDetector.detectChanges();
@@ -129,11 +129,11 @@ export function main() {
     it('should write directive properties', () => {
       var dirMeta = CompileDirectiveMetadata.create({
         type: new CompileTypeMetadata({name: 'SomeDir'}),
-        selector: '[dir-prop]',
+        selector: '[dirProp]',
         inputs: ['dirProp']
       });
 
-      var changeDetector = createChangeDetector('<div [dir-prop]="someProp">', [dirMeta], 0);
+      var changeDetector = createChangeDetector('<div [dirProp]="someProp">', [dirMeta], 0);
 
       context.someProp = 'someValue';
       changeDetector.detectChanges();
@@ -143,11 +143,11 @@ export function main() {
     it('should write template directive properties', () => {
       var dirMeta = CompileDirectiveMetadata.create({
         type: new CompileTypeMetadata({name: 'SomeDir'}),
-        selector: '[dir-prop]',
+        selector: '[dirProp]',
         inputs: ['dirProp']
       });
 
-      var changeDetector = createChangeDetector('<template [dir-prop]="someProp">', [dirMeta], 0);
+      var changeDetector = createChangeDetector('<template [dirProp]="someProp">', [dirMeta], 0);
 
       context.someProp = 'someValue';
       changeDetector.detectChanges();

modules/angular2/test/compiler/change_detector_compiler_spec.ts

@@ -83,7 +83,7 @@ export function main() {
                   {useValue: new ChangeDetectorGenConfig(true, false, false)})
         ]);
         it('should watch element properties', () => {
-          expect(detectChanges(compiler, '<div [el-prop]="someProp">'))
+          expect(detectChanges(compiler, '<div [elProp]="someProp">'))
               .toEqual(['elementProperty(elProp)=someValue']);
         });
       });
@@ -94,10 +94,9 @@ export function main() {
                   {useValue: new ChangeDetectorGenConfig(true, false, true)})
         ]);
         it('should watch element properties', () => {
-          expect(detectChanges(compiler, '<div [el-prop]="someProp">'))
+          expect(detectChanges(compiler, '<div [elProp]="someProp">'))
               .toEqual(['elementProperty(elProp)=someValue']);
         });
-
       });
 
 
@@ -117,7 +116,7 @@ export function main() {
       }
 
       it('should watch element properties', inject([AsyncTestCompleter], (async) => {
-           detectChanges(compiler, '<div [el-prop]="someProp">')
+           detectChanges(compiler, '<div [elProp]="someProp">')
                .then((value) => {
                  expect(value).toEqual(['elementProperty(elProp)=someValue']);
                  async.done();

modules/angular2/test/compiler/command_compiler_spec.ts

@@ -173,7 +173,7 @@ export function main() {
         it('should create bound element commands', inject([AsyncTestCompleter], (async) => {
              var rootComp = createComp({
                type: RootCompTypeMeta,
-               template: '<div a="b" #some-var (click)="someHandler" (window:scroll)="scrollTo()">'
+               template: '<div a="b" #someVar (click)="someHandler" (window:scroll)="scrollTo()">'
              });
              run(rootComp, [])
                  .then((data) => {
@@ -197,7 +197,7 @@ export function main() {
         it('should create element commands with directives',
            inject([AsyncTestCompleter], (async) => {
              var rootComp =
-                 createComp({type: RootCompTypeMeta, template: '<div a #some-var="someExport">'});
+                 createComp({type: RootCompTypeMeta, template: '<div a #someVar="someExport">'});
              var dir = CompileDirectiveMetadata.create({
                selector: '[a]',
                exportAs: 'someExport',
@@ -284,7 +284,7 @@ export function main() {
 
         it('should create component commands', inject([AsyncTestCompleter], (async) => {
              var rootComp = createComp(
-                 {type: RootCompTypeMeta, template: '<a a="b" #some-var (click)="someHandler">'});
+                 {type: RootCompTypeMeta, template: '<a a="b" #someVar (click)="someHandler">'});
              var comp = createComp({type: ACompTypeMeta, selector: 'a'});
              run(rootComp, [comp])
                  .then((data) => {
@@ -374,7 +374,7 @@ export function main() {
            inject([AsyncTestCompleter], (async) => {
              var rootComp = createComp({
                type: RootCompTypeMeta,
-               template: '<template #some-var="someValue" #some-empty-var></template>'
+               template: '<template #someVar="someValue" #someEmptyVar></template>'
              });
              var dir = createDirective(SomeDirTypeMeta, '[a]');
              run(rootComp, [dir], 1)

modules/angular2/test/compiler/html_parser_spec.ts

@@ -164,9 +164,14 @@ export function main() {
               .toEqual([[HtmlElementAst, '@myns:div', 0], [HtmlElementAst, '@myns:p', 1]]);
         });
 
-        it('should match closing tags case insensitive', () => {
-          expect(humanizeDom(parser.parse('<DiV><P></p></dIv>', 'TestComp')))
-              .toEqual([[HtmlElementAst, 'DiV', 0], [HtmlElementAst, 'P', 1]]);
+        it('should match closing tags case sensitive', () => {
+          let errors = parser.parse('<DiV><P></p></dIv>', 'TestComp').errors;
+          expect(errors.length).toEqual(2);
+          expect(humanizeErrors(errors))
+              .toEqual([
+                ['p', 'Unexpected closing tag "p"', '0:8'],
+                ['dIv', 'Unexpected closing tag "dIv"', '0:12'],
+              ]);
         });
 
         it('should support self closing void elements', () => {

modules/angular2/test/compiler/selector_spec.ts

@@ -21,14 +21,17 @@ export function main() {
       matcher = new SelectorMatcher();
     });
 
-    it('should select by element name case insensitive', () => {
+    it('should select by element name case sensitive', () => {
       matcher.addSelectables(s1 = CssSelector.parse('someTag'), 1);
 
       expect(matcher.match(CssSelector.parse('SOMEOTHERTAG')[0], selectableCollector))
           .toEqual(false);
       expect(matched).toEqual([]);
 
-      expect(matcher.match(CssSelector.parse('SOMETAG')[0], selectableCollector)).toEqual(true);
+      expect(matcher.match(CssSelector.parse('SOMETAG')[0], selectableCollector)).toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(CssSelector.parse('someTag')[0], selectableCollector)).toEqual(true);
       expect(matched).toEqual([s1[0], 1]);
     });
 
@@ -49,7 +52,7 @@ export function main() {
       expect(matched).toEqual([s1[0], 1, s2[0], 2]);
     });
 
-    it('should select by attr name case insensitive independent of the value', () => {
+    it('should select by attr name case sensitive independent of the value', () => {
       matcher.addSelectables(s1 = CssSelector.parse('[someAttr]'), 1);
       matcher.addSelectables(s2 = CssSelector.parse('[someAttr][someAttr2]'), 2);
 
@@ -57,15 +60,13 @@ export function main() {
           .toEqual(false);
       expect(matched).toEqual([]);
 
-      expect(matcher.match(CssSelector.parse('[SOMEATTR]')[0], selectableCollector)).toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
+      expect(matcher.match(CssSelector.parse('[SOMEATTR]')[0], selectableCollector)).toEqual(false);
+      expect(matched).toEqual([]);
 
-      reset();
       expect(matcher.match(CssSelector.parse('[SOMEATTR=someValue]')[0], selectableCollector))
-          .toEqual(true);
-      expect(matched).toEqual([s1[0], 1]);
+          .toEqual(false);
+      expect(matched).toEqual([]);
 
-      reset();
       expect(matcher.match(CssSelector.parse('[someAttr][someAttr2]')[0], selectableCollector))
           .toEqual(true);
       expect(matched).toEqual([s1[0], 1, s2[0], 2]);
@@ -100,7 +101,7 @@ export function main() {
       expect(matched).toEqual([s1[0], 1]);
     });
 
-    it('should select by attr name and value case insensitive', () => {
+    it('should select by attr name case sensitive and value case insensitive', () => {
       matcher.addSelectables(s1 = CssSelector.parse('[someAttr=someValue]'), 1);
 
       expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEOTHERATTR]')[0], selectableCollector))
@@ -108,6 +109,10 @@ export function main() {
       expect(matched).toEqual([]);
 
       expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEVALUE]')[0], selectableCollector))
+          .toEqual(false);
+      expect(matched).toEqual([]);
+
+      expect(matcher.match(CssSelector.parse('[someAttr=SOMEVALUE]')[0], selectableCollector))
           .toEqual(true);
       expect(matched).toEqual([s1[0], 1]);
     });
@@ -337,12 +342,13 @@ export function main() {
   });
 
   describe('CssSelector.getMatchingElementTemplate', () => {
-    it('should create an element with a tagName, classes, and attributes', () => {
-      let selector = CssSelector.parse('blink.neon.hotpink[sweet][dismissable=false]')[0];
-      let template = selector.getMatchingElementTemplate();
+    it('should create an element with a tagName, classes, and attributes with the correct casing',
+       () => {
+         let selector = CssSelector.parse('Blink.neon.hotpink[Sweet][Dismissable=false]')[0];
+         let template = selector.getMatchingElementTemplate();
 
-      expect(template).toEqual('<blink class="neon hotpink" sweet dismissable="false"></blink>');
-    });
+         expect(template).toEqual('<Blink class="neon hotpink" Sweet Dismissable="false"></Blink>');
+       });
 
     it('should create an element without a tag name', () => {
       let selector = CssSelector.parse('[fancy]')[0];

modules/angular2/test/compiler/template_normalizer_spec.ts

@@ -305,22 +305,22 @@ export function main() {
            expect(template.encapsulation).toEqual(ViewEncapsulation.None);
          }));
 
-      it('should ignore ng-content in elements with ng-non-bindable',
+      it('should ignore ng-content in elements with ngNonBindable',
          inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
            var template = normalizer.normalizeLoadedTemplate(
                dirType,
                new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
-               '<div ng-non-bindable><ng-content select="a"></ng-content></div>',
+               '<div ngNonBindable><ng-content select="a"></ng-content></div>',
                'package:some/module/');
            expect(template.ngContentSelectors).toEqual([]);
          }));
 
-      it('should still collect <style> in elements with ng-non-bindable',
+      it('should still collect <style> in elements with ngNonBindable',
          inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
            var template = normalizer.normalizeLoadedTemplate(
                dirType,
                new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
-               '<div ng-non-bindable><style>div {color:red}</style></div>', 'package:some/module/');
+               '<div ngNonBindable><style>div {color:red}</style></div>', 'package:some/module/');
            expect(template.styles).toEqual(['div {color:red}']);
          }));
     });

modules/angular2/test/compiler/template_parser_spec.ts

@@ -66,7 +66,7 @@ export function main() {
     beforeEach(inject([TemplateParser], (_parser) => {
       parser = _parser;
       ngIf = CompileDirectiveMetadata.create(
-          {selector: '[ng-if]', type: new CompileTypeMetadata({name: 'NgIf'}), inputs: ['ngIf']});
+          {selector: '[ngIf]', type: new CompileTypeMetadata({name: 'NgIf'}), inputs: ['ngIf']});
     }));
 
     function parse(template: string, directives: CompileDirectiveMetadata[]): TemplateAst[] {
@@ -120,16 +120,16 @@ export function main() {
               ]);
         });
 
-        it('should parse and camel case bound properties', () => {
+        it('should parse dash case bound properties', () => {
           expect(humanizeTplAst(parse('<div [some-prop]="v">', [])))
               .toEqual([
                 [ElementAst, 'div'],
-                [BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null]
+                [BoundElementPropertyAst, PropertyBindingType.Property, 'some-prop', 'v', null]
               ]);
         });
 
         it('should normalize property names via the element schema', () => {
-          expect(humanizeTplAst(parse('<div [mapped-attr]="v">', [])))
+          expect(humanizeTplAst(parse('<div [mappedAttr]="v">', [])))
               .toEqual([
                 [ElementAst, 'div'],
                 [BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null]
@@ -144,31 +144,12 @@ export function main() {
               ]);
         });
 
-        it('should parse and camel case bound attributes', () => {
-          expect(humanizeTplAst(parse('<div [attr.some-attr]="v">', [])))
-              .toEqual([
-                [ElementAst, 'div'],
-                [BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
-              ]);
-          expect(humanizeTplAst(parse('<div [ATTR.some-attr]="v">', [])))
-              .toEqual([
-                [ElementAst, 'div'],
-                [BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
-              ]);
-
-        });
-
         it('should parse and dash case bound classes', () => {
           expect(humanizeTplAst(parse('<div [class.some-class]="v">', [])))
               .toEqual([
                 [ElementAst, 'div'],
                 [BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
               ]);
-          expect(humanizeTplAst(parse('<div [CLASS.some-class]="v">', [])))
-              .toEqual([
-                [ElementAst, 'div'],
-                [BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
-              ]);
         });
 
         it('should parse mixed case bound classes', () => {
@@ -179,25 +160,27 @@ export function main() {
               ]);
         });
 
-        it('should parse and camel case bound styles', () => {
-          expect(humanizeTplAst(parse('<div [style.some-style]="v">', [])))
-              .toEqual([
-                [ElementAst, 'div'],
-                [BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
-              ]);
-          expect(humanizeTplAst(parse('<div [STYLE.some-style]="v">', [])))
+        it('should parse mixed case bound styles', () => {
+          expect(humanizeTplAst(parse('<div [style.someStyle]="v">', [])))
               .toEqual([
                 [ElementAst, 'div'],
                 [BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
               ]);
         });
 
-        it('should parse and mixed case bound styles', () => {
-          expect(humanizeTplAst(parse('<div [style.someStyle]="v">', [])))
-              .toEqual([
-                [ElementAst, 'div'],
-                [BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
-              ]);
+        it('should report invalid prefixes', () => {
+          expect(() => parse('<p [atTr.foo]>', []))
+              .toThrowError(
+                  `Template parse errors:\nInvalid property name 'atTr.foo' ("<p [ERROR ->][atTr.foo]>"): TestComp@0:3`);
+          expect(() => parse('<p [sTyle.foo]>', []))
+              .toThrowError(
+                  `Template parse errors:\nInvalid property name 'sTyle.foo' ("<p [ERROR ->][sTyle.foo]>"): TestComp@0:3`);
+          expect(() => parse('<p [Class.foo]>', []))
+              .toThrowError(
+                  `Template parse errors:\nInvalid property name 'Class.foo' ("<p [ERROR ->][Class.foo]>"): TestComp@0:3`);
+          expect(() => parse('<p [bar.foo]>', []))
+              .toThrowError(
+                  `Template parse errors:\nInvalid property name 'bar.foo' ("<p [ERROR ->][bar.foo]>"): TestComp@0:3`);
         });
 
         it('should parse bound properties via [...] and not report them as attributes', () => {
@@ -214,11 +197,6 @@ export function main() {
                 [ElementAst, 'div'],
                 [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
               ]);
-          expect(humanizeTplAst(parse('<div BIND-prop="v">', [])))
-              .toEqual([
-                [ElementAst, 'div'],
-                [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
-              ]);
         });
 
         it('should parse bound properties via {{...}} and not report them as attributes', () => {
@@ -243,12 +221,9 @@ export function main() {
               .toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
         });
 
-        it('should parse and camel case event names', () => {
+        it('should parse event names case sensitive', () => {
           expect(humanizeTplAst(parse('<div (some-event)="v">', [])))
-              .toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
-        });
-
-        it('should parse mixed case event names', () => {
+              .toEqual([[ElementAst, 'div'], [BoundEventAst, 'some-event', null, 'v']]);
           expect(humanizeTplAst(parse('<div (someEvent)="v">', [])))
               .toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
         });
@@ -256,8 +231,6 @@ export function main() {
         it('should parse bound events via on- and not report them as attributes', () => {
           expect(humanizeTplAst(parse('<div on-event="v">', [])))
               .toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
-          expect(humanizeTplAst(parse('<div ON-event="v">', [])))
-              .toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
         });
 
         it('should allow events on explicit embedded templates that are emitted by a directive',
@@ -295,12 +268,6 @@ export function main() {
                    [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
                    [BoundEventAst, 'propChange', null, 'v = $event']
                  ]);
-             expect(humanizeTplAst(parse('<div BINDON-prop="v">', [])))
-                 .toEqual([
-                   [ElementAst, 'div'],
-                   [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
-                   [BoundEventAst, 'propChange', null, 'v = $event']
-                 ]);
            });
 
       });
@@ -374,7 +341,7 @@ export function main() {
         it('should parse directive properties', () => {
           var dirA = CompileDirectiveMetadata.create(
               {selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']});
-          expect(humanizeTplAst(parse('<div [a-prop]="expr"></div>', [dirA])))
+          expect(humanizeTplAst(parse('<div [aProp]="expr"></div>', [dirA])))
               .toEqual([
                 [ElementAst, 'div'],
                 [DirectiveAst, dirA],
@@ -436,12 +403,10 @@ export function main() {
         it('should parse variables via var-... and not report them as attributes', () => {
           expect(humanizeTplAst(parse('<div var-a>', [])))
               .toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
-          expect(humanizeTplAst(parse('<div VAR-a>', [])))
-              .toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
         });
 
-        it('should camel case variables', () => {
-          expect(humanizeTplAst(parse('<div var-some-a>', [])))
+        it('should parse camel case variables', () => {
+          expect(humanizeTplAst(parse('<div var-someA>', [])))
               .toEqual([[ElementAst, 'div'], [VariableAst, 'someA', '']]);
         });
 
@@ -467,6 +432,11 @@ export function main() {
 There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"></div>"): TestComp@0:5`);
         });
 
+        it('should report invalid variable names', () => {
+          expect(() => parse('<div #a-b></div>', [])).toThrowError(`Template parse errors:
+"-" is not allowed in variable names ("<div [ERROR ->]#a-b></div>"): TestComp@0:5`);
+        });
+
         it('should allow variables with values that dont match a directive on embedded template elements',
            () => {
              expect(humanizeTplAst(parse('<template #a="b"></template>', [])))
@@ -515,8 +485,6 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
         it('should wrap the element into an EmbeddedTemplateAST', () => {
           expect(humanizeTplAst(parse('<div template>', [])))
               .toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
-          expect(humanizeTplAst(parse('<div TEMPLATE>', [])))
-              .toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
         });
 
         it('should parse bound properties', () => {
@@ -575,7 +543,7 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
         });
 
         it('should work with *... and use the attribute name as property binding name', () => {
-          expect(humanizeTplAst(parse('<div *ng-if="test">', [ngIf])))
+          expect(humanizeTplAst(parse('<div *ngIf="test">', [ngIf])))
               .toEqual([
                 [EmbeddedTemplateAst],
                 [DirectiveAst, ngIf],
@@ -585,7 +553,7 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
         });
 
         it('should work with *... and empty value', () => {
-          expect(humanizeTplAst(parse('<div *ng-if>', [ngIf])))
+          expect(humanizeTplAst(parse('<div *ngIf>', [ngIf])))
               .toEqual([
                 [EmbeddedTemplateAst],
                 [DirectiveAst, ngIf],
@@ -682,8 +650,8 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
             .toEqual([['a', null], ['b', 0], ['#text(hello)', 0]]);
       });
 
-      it('should project children of components with ng-non-bindable', () => {
-        expect(humanizeContentProjection(parse('<div ng-non-bindable>{{hello}}<span></span></div>',
+      it('should project children of components with ngNonBindable', () => {
+        expect(humanizeContentProjection(parse('<div ngNonBindable>{{hello}}<span></span></div>',
                                                [createComp('div', ['*'])])))
             .toEqual([['div', null], ['#text({{hello}})', 0], ['span', 0]]);
       });
@@ -705,8 +673,8 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
       });
 
       it('should report invalid property names', () => {
-        expect(() => parse('<div [invalid-prop]></div>', [])).toThrowError(`Template parse errors:
-Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR ->][invalid-prop]></div>"): TestComp@0:5`);
+        expect(() => parse('<div [invalidProp]></div>', [])).toThrowError(`Template parse errors:
+Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR ->][invalidProp]></div>"): TestComp@0:5`);
       });
 
       it('should report errors in expressions', () => {
@@ -813,46 +781,43 @@ Property binding a not used by any directive on an embedded template ("[ERROR ->
 
       });
 
-      it('should ignore bindings on children of elements with ng-non-bindable', () => {
-        expect(humanizeTplAst(parse('<div ng-non-bindable>{{b}}</div>', [])))
-            .toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, '{{b}}']]);
-        expect(humanizeTplAst(parse('<div NG-NON-BINDABLE>{{b}}</div>', [])))
-            .toEqual([[ElementAst, 'div'], [AttrAst, 'NG-NON-BINDABLE', ''], [TextAst, '{{b}}']]);
+      it('should ignore bindings on children of elements with ngNonBindable', () => {
+        expect(humanizeTplAst(parse('<div ngNonBindable>{{b}}</div>', [])))
+            .toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, '{{b}}']]);
       });
 
-      it('should keep nested children of elements with ng-non-bindable', () => {
-        expect(humanizeTplAst(parse('<div ng-non-bindable><span>{{b}}</span></div>', [])))
+      it('should keep nested children of elements with ngNonBindable', () => {
+        expect(humanizeTplAst(parse('<div ngNonBindable><span>{{b}}</span></div>', [])))
             .toEqual([
               [ElementAst, 'div'],
-              [AttrAst, 'ng-non-bindable', ''],
+              [AttrAst, 'ngNonBindable', ''],
               [ElementAst, 'span'],
               [TextAst, '{{b}}']
             ]);
       });
 
-      it('should ignore <script> elements inside of elements with ng-non-bindable', () => {
-        expect(humanizeTplAst(parse('<div ng-non-bindable><script></script>a</div>', [])))
-            .toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
+      it('should ignore <script> elements inside of elements with ngNonBindable', () => {
+        expect(humanizeTplAst(parse('<div ngNonBindable><script></script>a</div>', [])))
+            .toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
       });
 
-      it('should ignore <style> elements inside of elements with ng-non-bindable', () => {
-        expect(humanizeTplAst(parse('<div ng-non-bindable><style></style>a</div>', [])))
-            .toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
+      it('should ignore <style> elements inside of elements with ngNonBindable', () => {
+        expect(humanizeTplAst(parse('<div ngNonBindable><style></style>a</div>', [])))
+            .toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
       });
 
-      it('should ignore <link rel="stylesheet"> elements inside of elements with ng-non-bindable',
+      it('should ignore <link rel="stylesheet"> elements inside of elements with ngNonBindable',
          () => {
-           expect(humanizeTplAst(parse('<div ng-non-bindable><link rel="stylesheet">a</div>', [])))
-               .toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
+           expect(humanizeTplAst(parse('<div ngNonBindable><link rel="stylesheet">a</div>', [])))
+               .toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
          });
 
-      it('should convert <ng-content> elements into regular elements inside of elements with ng-non-bindable',
+      it('should convert <ng-content> elements into regular elements inside of elements with ngNonBindable',
          () => {
-           expect(
-               humanizeTplAst(parse('<div ng-non-bindable><ng-content></ng-content>a</div>', [])))
+           expect(humanizeTplAst(parse('<div ngNonBindable><ng-content></ng-content>a</div>', [])))
                .toEqual([
                  [ElementAst, 'div'],
-                 [AttrAst, 'ng-non-bindable', ''],
+                 [AttrAst, 'ngNonBindable', ''],
                  [ElementAst, 'ng-content'],
                  [TextAst, 'a']
                ]);
@@ -946,11 +911,11 @@ Property binding a not used by any directive on an embedded template ("[ERROR ->
       it('should support directive property', () => {
         var dirA = CompileDirectiveMetadata.create(
             {selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']});
-        expect(humanizeTplAstSourceSpans(parse('<div [a-prop]="foo | bar"></div>', [dirA])))
+        expect(humanizeTplAstSourceSpans(parse('<div [aProp]="foo | bar"></div>', [dirA])))
             .toEqual([
-              [ElementAst, 'div', '<div [a-prop]="foo | bar">'],
-              [DirectiveAst, dirA, '<div [a-prop]="foo | bar">'],
-              [BoundDirectivePropertyAst, 'aProp', '(foo | bar)', '[a-prop]="foo | bar"']
+              [ElementAst, 'div', '<div [aProp]="foo | bar">'],
+              [DirectiveAst, dirA, '<div [aProp]="foo | bar">'],
+              [BoundDirectivePropertyAst, 'aProp', '(foo | bar)', '[aProp]="foo | bar"']
             ]);
       });
 

modules/angular2/test/core/change_detection/parser/parser_spec.ts

@@ -343,7 +343,7 @@ export function main() {
 
       it('should allow multiple pairs', () => {
         var bindings = parseTemplateBindings("a 1 b 2");
-        expect(keys(bindings)).toEqual(['a', 'a-b']);
+        expect(keys(bindings)).toEqual(['a', 'aB']);
         expect(exprSources(bindings)).toEqual(['1 ', '2']);
       });
 
@@ -382,7 +382,7 @@ export function main() {
 
         bindings = parseTemplateBindings("directive: var item in expr; var a = b", 'location');
         expect(keyValues(bindings))
-            .toEqual(['directive', '#item=\$implicit', 'directive-in=expr in location', '#a=b']);
+            .toEqual(['directive', '#item=\$implicit', 'directiveIn=expr in location', '#a=b']);
       });
 
       it('should parse pipes', () => {

modules/angular2/test/core/debug/debug_element_spec.ts

@@ -53,7 +53,7 @@ class MessageDir {
   template: `<div class="child" message="child">
                <span class="childnested" message="nestedchild">Child</span>
              </div>
-             <span class="child" [inner-html]="childBinding"></span>`,
+             <span class="child" [innerHtml]="childBinding"></span>`,
   directives: [MessageDir],
 })
 @Injectable()
@@ -65,7 +65,7 @@ class ChildComp {
 
 @Component({selector: 'cond-content-comp', viewProviders: [Logger]})
 @View({
-  template: `<div class="child" message="child" *ng-if="false"><ng-content></ng-content></div>`,
+  template: `<div class="child" message="child" *ngIf="false"><ng-content></ng-content></div>`,
   directives: [NgIf, MessageDir],
 })
 @Injectable()
@@ -77,7 +77,7 @@ class ConditionalContentComp {
   template: `<div class="parent" message="parent">
                <span class="parentnested" message="nestedparent">Parent</span>
              </div>
-             <span class="parent" [inner-html]="parentBinding"></span>
+             <span class="parent" [innerHtml]="parentBinding"></span>
              <child-comp class="child-comp-class"></child-comp>
              <cond-content-comp class="cond-content-comp-class"></cond-content-comp>`,
   directives: [ChildComp, MessageDir, ConditionalContentComp],
@@ -119,9 +119,9 @@ class EventsComp {
 
 @Component({selector: 'using-for', viewProviders: [Logger]})
 @View({
-  template: `<span *ng-for="#thing of stuff" [inner-html]="thing"></span>
+  template: `<span *ngFor="#thing of stuff" [innerHtml]="thing"></span>
             <ul message="list">
-              <li *ng-for="#item of stuff" [inner-html]="item"></li>
+              <li *ngFor="#item of stuff" [innerHtml]="item"></li>
             </ul>`,
   directives: [NgFor, MessageDir],
 })

modules/angular2/test/core/forward_ref_integration_spec.ts

@@ -48,10 +48,10 @@ export function main() {
 class App {
 }
 
-@Component({selector: 'Lock'})
+@Component({selector: 'lock'})
 @View({
   directives: [NgFor],
-  template: `{{frame.name}}(<span *ng-for="var lock of locks">{{lock.name}}</span>)`,
+  template: `{{frame.name}}(<span *ngFor="var lock of locks">{{lock.name}}</span>)`,
 })
 class Door {
   locks: QueryList<Lock>;

modules/angular2/test/core/linker/dynamic_component_loader_spec.ts

@@ -74,7 +74,7 @@ export function main() {
          inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
                 (loader, tcb: TestComponentBuilder, async) => {
                   tcb.overrideView(MyComp, new ViewMetadata({
-                                     template: '<child-cmp *ng-if="ctxBoolProp"></child-cmp>',
+                                     template: '<child-cmp *ngIf="ctxBoolProp"></child-cmp>',
                                      directives: [NgIf, ChildComp]
                                    }))
                       .overrideView(

modules/angular2/test/core/linker/integration_dart_spec.dart

@@ -293,7 +293,7 @@ class OnChangeComponent implements OnChanges {
     ])
 @View(
     template:
-        '<span *ng-for="#item of list">{{item}}</span><directive-logging-checks></directive-logging-checks>',
+        '<span *ngFor="#item of list">{{item}}</span><directive-logging-checks></directive-logging-checks>',
     directives: const [NgFor, DirectiveLoggingChecks])
 class ComponentWithObservableList {
   Iterable list;

modules/angular2/test/core/linker/integration_spec.ts

@@ -239,10 +239,10 @@ export function main() {
                });
          }));
 
-      it('should consume binding to camel-cased properties using dash-cased syntax in templates',
+      it('should consume binding to camel-cased properties',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            tcb.overrideView(MyComp,
-                            new ViewMetadata({template: '<input [read-only]="ctxBoolProp">'}))
+                            new ViewMetadata({template: '<input [readOnly]="ctxBoolProp">'}))
 
                .createAsync(MyComp)
                .then((fixture) => {
@@ -260,10 +260,10 @@ export function main() {
                });
          }));
 
-      it('should consume binding to inner-html',
+      it('should consume binding to innerHtml',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            tcb.overrideView(MyComp,
-                            new ViewMetadata({template: '<div inner-html="{{ctxProp}}"></div>'}))
+                            new ViewMetadata({template: '<div innerHtml="{{ctxProp}}"></div>'}))
 
                .createAsync(MyComp)
                .then((fixture) => {
@@ -503,7 +503,7 @@ export function main() {
            tcb.overrideView(
                   MyComp, new ViewMetadata({
                     template:
-                        '<some-directive><toolbar><template toolbarpart var-toolbar-prop="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-host></cmp-with-host></template></toolbar></some-directive>',
+                        '<some-directive><toolbar><template toolbarpart var-toolbarProp="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-host></cmp-with-host></template></toolbar></some-directive>',
                     directives: [SomeDirective, CompWithHost, ToolbarComponent, ToolbarPart]
                   }))
                .createAsync(MyComp)
@@ -634,11 +634,11 @@ export function main() {
                             async.done();
                           })}));
 
-        it('should change dash-case to camel-case',
+        it('should preserve case',
            inject(
                [TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
                  tcb.overrideView(MyComp, new ViewMetadata({
-                                    template: '<p><child-cmp var-super-alice></child-cmp></p>',
+                                    template: '<p><child-cmp var-superAlice></child-cmp></p>',
                                     directives: [ChildComp]
                                   }))
 
@@ -657,7 +657,7 @@ export function main() {
              tcb.overrideView(
                     MyComp, new ViewMetadata({
                       template:
-                          '<template ng-for [ng-for-of]="[1]" var-i><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</template>',
+                          '<template ngFor [ngForOf]="[1]" var-i><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</template>',
                       directives: [ChildCompNoTemplate, NgFor]
                     }))
 
@@ -810,7 +810,7 @@ export function main() {
            tcb.overrideView(MyComp, new ViewMetadata({
                               template: `
             <some-directive>
-              <p *ng-if="true">
+              <p *ngIf="true">
                 <cmp-with-host #child></cmp-with-host>
               </p>
             </some-directive>`,
@@ -1041,7 +1041,7 @@ export function main() {
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            tcb.overrideView(
                   MyComp, new ViewMetadata({
-                    template: '<div *ng-if="ctxBoolProp" listener listenerother></div>',
+                    template: '<div *ngIf="ctxBoolProp" listener listenerother></div>',
                     directives:
                         [NgIf, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
                   }))
@@ -1231,7 +1231,7 @@ export function main() {
                   MyComp, new ViewMetadata({
                     template: `
               <component-providing-logging-injectable #providing>
-                <directive-consuming-injectable *ng-if="ctxBoolProp">
+                <directive-consuming-injectable *ngIf="ctxBoolProp">
                 </directive-consuming-injectable>
               </component-providing-logging-injectable>
           `,
@@ -1482,29 +1482,29 @@ export function main() {
        }));
 
     it('should support moving embedded views around',
-       inject([TestComponentBuilder, AsyncTestCompleter, ANCHOR_ELEMENT], (tcb, async,
-                                                                           anchorElement) => {
-         tcb.overrideView(MyComp, new ViewMetadata({
-                            template: '<div><div *some-impvp="ctxBoolProp">hello</div></div>',
-                            directives: [SomeImperativeViewport]
-                          }))
-             .createAsync(MyComp)
-             .then((fixture: ComponentFixture) => {
-               fixture.detectChanges();
-               expect(anchorElement).toHaveText('');
+       inject([TestComponentBuilder, AsyncTestCompleter, ANCHOR_ELEMENT],
+              (tcb, async, anchorElement) => {
+                tcb.overrideView(MyComp, new ViewMetadata({
+                                   template: '<div><div *someImpvp="ctxBoolProp">hello</div></div>',
+                                   directives: [SomeImperativeViewport]
+                                 }))
+                    .createAsync(MyComp)
+                    .then((fixture: ComponentFixture) => {
+                      fixture.detectChanges();
+                      expect(anchorElement).toHaveText('');
 
-               fixture.debugElement.componentInstance.ctxBoolProp = true;
-               fixture.detectChanges();
+                      fixture.debugElement.componentInstance.ctxBoolProp = true;
+                      fixture.detectChanges();
 
-               expect(anchorElement).toHaveText('hello');
+                      expect(anchorElement).toHaveText('hello');
 
-               fixture.debugElement.componentInstance.ctxBoolProp = false;
-               fixture.detectChanges();
-               expect(fixture.debugElement.nativeElement).toHaveText('');
+                      fixture.debugElement.componentInstance.ctxBoolProp = false;
+                      fixture.detectChanges();
+                      expect(fixture.debugElement.nativeElement).toHaveText('');
 
-               async.done();
-             });
-       }));
+                      async.done();
+                    });
+              }));
 
     describe('Property bindings', () => {
       if (!IS_DART) {
@@ -1658,8 +1658,8 @@ export function main() {
         it('should raise an error for missing template directive (2)',
            inject([TestComponentBuilder, AsyncTestCompleter],
                   (tcb: TestComponentBuilder, async) => {
-                    expectCompileError(tcb, '<div><template *ng-if="condition"></template></div>',
-                                       'Missing directive to handle: <template *ng-if="condition">',
+                    expectCompileError(tcb, '<div><template *ngIf="condition"></template></div>',
+                                       'Missing directive to handle: <template *ngIf="condition">',
                                        () => async.done());
                   }));
 
@@ -1667,8 +1667,8 @@ export function main() {
            inject([TestComponentBuilder, AsyncTestCompleter],
                   (tcb: TestComponentBuilder, async) => {
                     expectCompileError(
-                        tcb, '<div *ng-if="condition"></div>',
-                        'Missing directive to handle \'if\' in MyComp: <div *ng-if="condition">',
+                        tcb, '<div *ngIf="condition"></div>',
+                        'Missing directive to handle \'if\' in MyComp: <div *ngIf="condition">',
                         () => async.done());
                   }));
       }
@@ -1679,7 +1679,7 @@ export function main() {
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            tcb.overrideView(
                   MyComp, new ViewMetadata({
-                    template: '<with-prop-decorators el-prop="aaa"></with-prop-decorators>',
+                    template: '<with-prop-decorators elProp="aaa"></with-prop-decorators>',
                     directives: [DirectiveWithPropDecorators]
                   }))
                .createAsync(MyComp)
@@ -1714,11 +1714,11 @@ export function main() {
          }));
 
       if (DOM.supportsDOMEvents()) {
-        it('should support events decorators',
+        it('should support event decorators',
            inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                     tcb = tcb.overrideView(
                         MyComp, new ViewMetadata({
-                          template: `<with-prop-decorators (el-event)="ctxProp='called'">`,
+                          template: `<with-prop-decorators (elEvent)="ctxProp='called'">`,
                           directives: [DirectiveWithPropDecorators]
                         }));
 
@@ -2132,7 +2132,7 @@ class ToolbarPart {
   constructor(templateRef: TemplateRef) { this.templateRef = templateRef; }
 }
 
-@Directive({selector: '[toolbar-vc]', inputs: ['toolbarVc']})
+@Directive({selector: '[toolbarVc]', inputs: ['toolbarVc']})
 @Injectable()
 class ToolbarViewContainer {
   vc: ViewContainerRef;
@@ -2146,7 +2146,7 @@ class ToolbarViewContainer {
 
 @Component({selector: 'toolbar'})
 @View({
-  template: 'TOOLBAR(<div *ng-for="var part of query" [toolbar-vc]="part"></div>)',
+  template: 'TOOLBAR(<div *ngFor="var part of query" [toolbarVc]="part"></div>)',
   directives: [ToolbarViewContainer, NgFor]
 })
 @Injectable()
@@ -2299,7 +2299,7 @@ class ChildConsumingEventBus {
   constructor(@SkipSelf() bus: EventBus) { this.bus = bus; }
 }
 
-@Directive({selector: '[some-impvp]', inputs: ['someImpvp']})
+@Directive({selector: '[someImpvp]', inputs: ['someImpvp']})
 @Injectable()
 class SomeImperativeViewport {
   view: ViewRef;
@@ -2355,7 +2355,7 @@ class DirectiveThrowingAnError {
 @Component({
   selector: 'component-with-template',
   directives: [NgFor],
-  template: `No View Decorator: <div *ng-for="#item of items">{{item}}</div>`
+  template: `No View Decorator: <div *ngFor="#item of items">{{item}}</div>`
 })
 class ComponentWithTemplate {
   items = [1, 2, 3];
@@ -2365,7 +2365,7 @@ class ComponentWithTemplate {
 class DirectiveWithPropDecorators {
   target;
 
-  @Input("elProp") dirProp: string;
+  @Input('elProp') dirProp: string;
   @Output('elEvent') event = new EventEmitter();
 
   @HostBinding("attr.my-attr") myAttr: string;

modules/angular2/test/core/linker/projection_integration_spec.ts

@@ -100,7 +100,7 @@ export function main() {
          tcb.overrideView(
                 Simple, new ViewMetadata({
                   template:
-                      'SIMPLE(<div><ng-content></ng-content></div><div [tab-index]="0">EL</div>)',
+                      'SIMPLE(<div><ng-content></ng-content></div><div [tabIndex]="0">EL</div>)',
                   directives: []
                 }))
              .overrideView(
@@ -290,7 +290,7 @@ export function main() {
          tcb.overrideView(
                 MainComp,
                 new ViewMetadata(
-                    {template: '<simple string-prop="text"></simple>', directives: [Simple]}))
+                    {template: '<simple stringProp="text"></simple>', directives: [Simple]}))
              .overrideTemplate(Simple, '<ng-content></ng-content><p>P,</p>{{stringProp}}')
              .createAsync(MainComp)
              .then((main: ComponentFixture) => {
@@ -311,7 +311,7 @@ export function main() {
          tcb.overrideView(
                 MainComp,
                 new ViewMetadata(
-                    {template: '<simple string-prop="text"></simple>', directives: [Simple]}))
+                    {template: '<simple stringProp="text"></simple>', directives: [Simple]}))
              .overrideTemplate(Simple, '<style></style><p>P,</p>{{stringProp}}')
              .createAsync(MainComp)
              .then((main: ComponentFixture) => {

modules/angular2/test/core/linker/query_integration_spec.ts

@@ -84,7 +84,7 @@ export function main() {
       it('should contain the first content child',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template =
-               '<needs-content-child #q><div *ng-if="shouldShow" text="foo"></div></needs-content-child>';
+               '<needs-content-child #q><div *ngIf="shouldShow" text="foo"></div></needs-content-child>';
 
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
@@ -178,7 +178,7 @@ export function main() {
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template =
                '<div text="1"></div>' +
-               '<needs-query text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query>' +
+               '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
                '<div text="4"></div>';
 
            tcb.overrideTemplate(MyComp, template)
@@ -201,7 +201,7 @@ export function main() {
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template =
                '<div text="1"></div>' +
-               '<needs-query text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query>' +
+               '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
                '<div text="4"></div>';
 
            tcb.overrideTemplate(MyComp, template)
@@ -219,7 +219,7 @@ export function main() {
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template =
                '<div text="1"></div>' +
-               '<needs-query text="2"><div *ng-for="var i of list" [text]="i"></div></needs-query>' +
+               '<needs-query text="2"><div *ngFor="var i of list" [text]="i"></div></needs-query>' +
                '<div text="4"></div>';
 
            tcb.overrideTemplate(MyComp, template)
@@ -264,7 +264,7 @@ export function main() {
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<needs-query #q>' +
                           '<div text="1"></div>' +
-                          '<div *ng-if="shouldShow" text="2"></div>' +
+                          '<div *ngIf="shouldShow" text="2"></div>' +
                           '</needs-query>';
 
            tcb.overrideTemplate(MyComp, template)
@@ -312,8 +312,7 @@ export function main() {
 
       it('should correctly clean-up when destroyed together with the directives it is querying',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template =
-               '<needs-query #q *ng-if="shouldShow"><div text="foo"></div></needs-query>';
+           var template = '<needs-query #q *ngIf="shouldShow"><div text="foo"></div></needs-query>';
 
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
@@ -342,10 +341,9 @@ export function main() {
     describe("querying by var binding", () => {
       it('should contain all the child directives in the light dom with the given var binding',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template =
-               '<needs-query-by-var-binding #q>' +
-               '<div *ng-for="#item of list" [text]="item" #text-label="textDir"></div>' +
-               '</needs-query-by-var-binding>';
+           var template = '<needs-query-by-var-binding #q>' +
+                          '<div *ngFor="#item of list" [text]="item" #textLabel="textDir"></div>' +
+                          '</needs-query-by-var-binding>';
 
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
@@ -366,8 +364,8 @@ export function main() {
       it('should support querying by multiple var bindings',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<needs-query-by-var-bindings #q>' +
-                          '<div text="one" #text-label1="textDir"></div>' +
-                          '<div text="two" #text-label2="textDir"></div>' +
+                          '<div text="one" #textLabel1="textDir"></div>' +
+                          '<div text="two" #textLabel2="textDir"></div>' +
                           '</needs-query-by-var-bindings>';
 
            tcb.overrideTemplate(MyComp, template)
@@ -385,10 +383,9 @@ export function main() {
 
       it('should reflect dynamically inserted directives',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           var template =
-               '<needs-query-by-var-binding #q>' +
-               '<div *ng-for="#item of list" [text]="item" #text-label="textDir"></div>' +
-               '</needs-query-by-var-binding>';
+           var template = '<needs-query-by-var-binding #q>' +
+                          '<div *ngFor="#item of list" [text]="item" #textLabel="textDir"></div>' +
+                          '</needs-query-by-var-binding>';
 
            tcb.overrideTemplate(MyComp, template)
                .createAsync(MyComp)
@@ -412,8 +409,8 @@ export function main() {
       it('should contain all the elements in the light dom with the given var binding',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<needs-query-by-var-binding #q>' +
-                          '<div template="ng-for: #item of list">' +
-                          '<div #text-label>{{item}}</div>' +
+                          '<div template="ngFor: #item of list">' +
+                          '<div #textLabel>{{item}}</div>' +
                           '</div>' +
                           '</needs-query-by-var-binding>';
 
@@ -622,7 +619,7 @@ export function main() {
                });
          }));
 
-      it('should handle long ng-for cycles',
+      it('should handle long ngFor cycles',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<needs-view-query-order #q></needs-view-query-order>';
 
@@ -716,7 +713,7 @@ class NeedsContentChild implements AfterContentInit, AfterContentChecked {
 @Component({selector: 'needs-view-child'})
 @View({
   template: `
-    <div *ng-if="shouldShow" text="foo"></div>
+    <div *ngIf="shouldShow" text="foo"></div>
   `,
   directives: [NgIf, TextDirective]
 })
@@ -749,7 +746,7 @@ class InertDirective {
 @Component({selector: 'needs-query'})
 @View({
   directives: [NgFor, TextDirective],
-  template: '<div text="ignoreme"></div><b *ng-for="var dir of query">{{dir.text}}|</b>'
+  template: '<div text="ignoreme"></div><b *ngFor="var dir of query">{{dir.text}}|</b>'
 })
 @Injectable()
 class NeedsQuery {
@@ -767,7 +764,7 @@ class NeedsFourQueries {
 }
 
 @Component({selector: 'needs-query-desc'})
-@View({directives: [NgFor], template: '<div *ng-for="var dir of query">{{dir.text}}|</div>'})
+@View({directives: [NgFor], template: '<div *ngFor="var dir of query">{{dir.text}}|</div>'})
 @Injectable()
 class NeedsQueryDesc {
   query: QueryList<TextDirective>;
@@ -787,7 +784,7 @@ class NeedsQueryByLabel {
 }
 
 @Component({selector: 'needs-view-query-by-var-binding'})
-@View({directives: [], template: '<div #text-label>text</div>'})
+@View({directives: [], template: '<div #textLabel>text</div>'})
 @Injectable()
 class NeedsViewQueryByLabel {
   query: QueryList<any>;
@@ -807,7 +804,7 @@ class NeedsQueryByTwoLabels {
 @Component({selector: 'needs-query-and-project'})
 @View({
   directives: [NgFor],
-  template: '<div *ng-for="var dir of query">{{dir.text}}|</div><ng-content></ng-content>'
+  template: '<div *ngFor="var dir of query">{{dir.text}}|</div><ng-content></ng-content>'
 })
 @Injectable()
 class NeedsQueryAndProject {
@@ -828,7 +825,7 @@ class NeedsViewQuery {
 }
 
 @Component({selector: 'needs-view-query-if'})
-@View({directives: [NgIf, TextDirective], template: '<div *ng-if="show" text="1"></div>'})
+@View({directives: [NgIf, TextDirective], template: '<div *ngIf="show" text="1"></div>'})
 @Injectable()
 class NeedsViewQueryIf {
   show: boolean;
@@ -843,7 +840,7 @@ class NeedsViewQueryIf {
 @Component({selector: 'needs-view-query-nested-if'})
 @View({
   directives: [NgIf, InertDirective, TextDirective],
-  template: '<div text="1"><div *ng-if="show"><div dir></div></div></div>'
+  template: '<div text="1"><div *ngIf="show"><div dir></div></div></div>'
 })
 @Injectable()
 class NeedsViewQueryNestedIf {
@@ -859,7 +856,7 @@ class NeedsViewQueryNestedIf {
 @View({
   directives: [NgFor, TextDirective, InertDirective],
   template: '<div text="1"></div>' +
-                '<div *ng-for="var i of list" [text]="i"></div>' +
+                '<div *ngFor="var i of list" [text]="i"></div>' +
                 '<div text="4"></div>'
 })
 @Injectable()
@@ -876,7 +873,7 @@ class NeedsViewQueryOrder {
 @View({
   directives: [NgFor, TextDirective, InertDirective],
   template: '<div dir><div text="1"></div>' +
-                '<div *ng-for="var i of list" [text]="i"></div>' +
+                '<div *ngFor="var i of list" [text]="i"></div>' +
                 '<div text="4"></div></div>'
 })
 @Injectable()

modules/angular2/test/router/integration/auxiliary_route_spec.ts

@@ -78,7 +78,7 @@ export function main() {
     it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
          compile(
              tcb,
-             `<a [router-link]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
+             `<a [routerLink]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
              .then((rtc) => {fixture = rtc})
              .then((_) => rtr.config([
                new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
@@ -95,7 +95,7 @@ export function main() {
        inject([AsyncTestCompleter, Location], (async, location) => {
          compile(
              tcb,
-             `<a [router-link]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
+             `<a [routerLink]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
              .then((rtc) => {fixture = rtc})
              .then((_) => rtr.config([
                new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),

modules/angular2/test/router/integration/impl/async_route_spec_impl.ts

@@ -117,7 +117,7 @@ function asyncRoutesWithoutChildrenWithoutParams() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
+       compile(tcb, `<a [routerLink]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new AsyncRoute({path: '/test', loader: helloCmpLoader, name: 'Hello'})]))
@@ -130,7 +130,7 @@ function asyncRoutesWithoutChildrenWithoutParams() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
+       compile(tcb, `<a [routerLink]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new AsyncRoute({path: '/test', loader: helloCmpLoader, name: 'Hello'})]))
@@ -190,7 +190,7 @@ function asyncRoutesWithoutChildrenWithParams() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
+       compile(tcb, `<a [routerLink]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new AsyncRoute({path: '/user/:name', loader: userCmpLoader, name: 'User'})]))
@@ -203,7 +203,7 @@ function asyncRoutesWithoutChildrenWithParams() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
+       compile(tcb, `<a [routerLink]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new AsyncRoute({path: '/user/:name', loader: userCmpLoader, name: 'User'})]))
@@ -282,7 +282,7 @@ function asyncRoutesWithSyncChildrenWithoutDefaultRoutes() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new AsyncRoute({path: '/a/...', loader: parentCmpLoader, name: 'Parent'})]))
@@ -295,7 +295,7 @@ function asyncRoutesWithSyncChildrenWithoutDefaultRoutes() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new AsyncRoute({path: '/a/...', loader: parentCmpLoader, name: 'Parent'})]))
@@ -358,7 +358,7 @@ function asyncRoutesWithSyncChildrenWithDefaultRoutes() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config([
              new AsyncRoute({path: '/a/...', loader: parentWithDefaultCmpLoader, name: 'Parent'})
@@ -372,7 +372,7 @@ function asyncRoutesWithSyncChildrenWithDefaultRoutes() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config([
              new AsyncRoute({path: '/a/...', loader: parentWithDefaultCmpLoader, name: 'Parent'})
@@ -436,7 +436,7 @@ function asyncRoutesWithAsyncChildrenWithoutParamsWithoutDefaultRoutes() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {rootTC = rtc})
            .then((_) => rtr.config([
              new AsyncRoute({path: '/a/...', loader: asyncParentCmpLoader, name: 'Parent'})
@@ -450,7 +450,7 @@ function asyncRoutesWithAsyncChildrenWithoutParamsWithoutDefaultRoutes() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {rootTC = rtc})
            .then((_) => rtr.config([
              new AsyncRoute({path: '/a/...', loader: asyncParentCmpLoader, name: 'Parent'})
@@ -516,7 +516,7 @@ function asyncRoutesWithAsyncChildrenWithoutParamsWithDefaultRoutes() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {rootTC = rtc})
            .then((_) => rtr.config([
              new AsyncRoute(
@@ -531,7 +531,7 @@ function asyncRoutesWithAsyncChildrenWithoutParamsWithDefaultRoutes() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {rootTC = rtc})
            .then((_) => rtr.config([
              new AsyncRoute(
@@ -600,7 +600,7 @@ function asyncRoutesWithAsyncChildrenWithParamsWithoutDefaultRoutes() {
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
        compile(
            tcb,
-           `<a [router-link]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
+           `<a [routerLink]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config([
              new AsyncRoute({path: '/team/:id/...', loader: asyncTeamLoader, name: 'Team'})
@@ -616,7 +616,7 @@ function asyncRoutesWithAsyncChildrenWithParamsWithoutDefaultRoutes() {
      inject([AsyncTestCompleter, Location], (async, location) => {
        compile(
            tcb,
-           `<a [router-link]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
+           `<a [routerLink]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config([
              new AsyncRoute({path: '/team/:id/...', loader: asyncTeamLoader, name: 'Team'})

modules/angular2/test/router/integration/impl/sync_route_spec_impl.ts

@@ -62,7 +62,7 @@ function syncRoutesWithoutChildrenWithoutParams() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
+       compile(tcb, `<a [routerLink]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
            .then((rtc) => {fixture = rtc})
            .then((_) =>
                      rtr.config([new Route({path: '/test', component: HelloCmp, name: 'Hello'})]))
@@ -75,7 +75,7 @@ function syncRoutesWithoutChildrenWithoutParams() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
+       compile(tcb, `<a [routerLink]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
            .then((rtc) => {fixture = rtc})
            .then((_) =>
                      rtr.config([new Route({path: '/test', component: HelloCmp, name: 'Hello'})]))
@@ -135,7 +135,7 @@ function syncRoutesWithoutChildrenWithParams() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
+       compile(tcb, `<a [routerLink]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new Route({path: '/user/:name', component: UserCmp, name: 'User'})]))
@@ -148,7 +148,7 @@ function syncRoutesWithoutChildrenWithParams() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
+       compile(tcb, `<a [routerLink]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new Route({path: '/user/:name', component: UserCmp, name: 'User'})]))
@@ -227,7 +227,7 @@ function syncRoutesWithSyncChildrenWithoutDefaultRoutesWithoutParams() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new Route({path: '/a/...', component: ParentCmp, name: 'Parent'})]))
@@ -240,7 +240,7 @@ function syncRoutesWithSyncChildrenWithoutDefaultRoutesWithoutParams() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new Route({path: '/a/...', component: ParentCmp, name: 'Parent'})]))
@@ -305,7 +305,7 @@ function syncRoutesWithSyncChildrenWithoutDefaultRoutesWithParams() {
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
        compile(
            tcb,
-           `<a [router-link]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
+           `<a [routerLink]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new Route({path: '/team/:id/...', component: TeamCmp, name: 'Team'})]))
@@ -320,7 +320,7 @@ function syncRoutesWithSyncChildrenWithoutDefaultRoutesWithParams() {
      inject([AsyncTestCompleter, Location], (async, location) => {
        compile(
            tcb,
-           `<a [router-link]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
+           `<a [routerLink]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then((_) => rtr.config(
                      [new Route({path: '/team/:id/...', component: TeamCmp, name: 'Team'})]))
@@ -383,7 +383,7 @@ function syncRoutesWithSyncChildrenWithDefaultRoutesWithoutParams() {
      }));
 
   it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
-       compile(tcb, `<a [router-link]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then(
                (_) => rtr.config(
@@ -397,7 +397,7 @@ function syncRoutesWithSyncChildrenWithDefaultRoutesWithoutParams() {
 
   it('should navigate from a link click',
      inject([AsyncTestCompleter, Location], (async, location) => {
-       compile(tcb, `<a [router-link]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
+       compile(tcb, `<a [routerLink]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
            .then((rtc) => {fixture = rtc})
            .then(
                (_) => rtr.config(

modules/angular2/test/router/integration/router_link_spec.ts

@@ -45,7 +45,7 @@ import {TEMPLATE_TRANSFORMS} from 'angular2/compiler';
 import {RouterLinkTransform} from 'angular2/src/router/router_link_transform';
 
 export function main() {
-  describe('router-link directive', function() {
+  describe('routerLink directive', function() {
     var tcb: TestComponentBuilder;
     var fixture: ComponentFixture;
     var router, location;
@@ -77,7 +77,7 @@ export function main() {
     it('should generate absolute hrefs that include the base href',
        inject([AsyncTestCompleter], (async) => {
          location.setBaseHref('/my/base');
-         compile('<a href="hello" [router-link]="[\'./User\']"></a>')
+         compile('<a href="hello" [routerLink]="[\'./User\']"></a>')
              .then((_) => router.config(
                        [new Route({path: '/user', component: UserCmp, name: 'User'})]))
              .then((_) => router.navigateByUrl('/a/b'))
@@ -90,7 +90,7 @@ export function main() {
 
 
     it('should generate link hrefs without params', inject([AsyncTestCompleter], (async) => {
-         compile('<a href="hello" [router-link]="[\'./User\']"></a>')
+         compile('<a href="hello" [routerLink]="[\'./User\']"></a>')
              .then((_) => router.config(
                        [new Route({path: '/user', component: UserCmp, name: 'User'})]))
              .then((_) => router.navigateByUrl('/a/b'))
@@ -103,7 +103,7 @@ export function main() {
 
 
     it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => {
-         compile('<a href="hello" [router-link]="[\'./User\', {name: name}]">{{name}}</a>')
+         compile('<a href="hello" [routerLink]="[\'./User\', {name: name}]">{{name}}</a>')
              .then((_) => router.config(
                        [new Route({path: '/user/:name', component: UserCmp, name: 'User'})]))
              .then((_) => router.navigateByUrl('/a/b'))
@@ -257,8 +257,8 @@ export function main() {
                    new Route({path: '/child', component: HelloCmp, name: 'Child'}),
                    new Route({path: '/better-child', component: Hello2Cmp, name: 'BetterChild'})
                  ])
-               .then((_) => compile(`<a [router-link]="['./Child']" class="child-link">Child</a>
-                                <a [router-link]="['./BetterChild']" class="better-child-link">Better Child</a>
+               .then((_) => compile(`<a [routerLink]="['./Child']" class="child-link">Child</a>
+                                <a [routerLink]="['./BetterChild']" class="better-child-link">Better Child</a>
                                 <router-outlet></router-outlet>`))
                .then((_) => {
                  var element = fixture.debugElement.nativeElement;
@@ -292,8 +292,8 @@ export function main() {
                      name: 'ChildWithGrandchild'
                    })
                  ])
-               .then((_) => compile(`<a [router-link]="['./Child']" class="child-link">Child</a>
-                                <a [router-link]="['./ChildWithGrandchild/Grandchild']" class="child-with-grandchild-link">Better Child</a>
+               .then((_) => compile(`<a [routerLink]="['./Child']" class="child-link">Child</a>
+                                <a [routerLink]="['./ChildWithGrandchild/Grandchild']" class="child-with-grandchild-link">Better Child</a>
                                 <router-outlet></router-outlet>`))
                .then((_) => {
                  var element = fixture.debugElement.nativeElement;
@@ -327,7 +327,7 @@ export function main() {
 
       describe("router link dsl", () => {
         it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => {
-             compile('<a href="hello" [router-link]="route:./User(name: name)">{{name}}</a>')
+             compile('<a href="hello" [routerLink]="route:./User(name: name)">{{name}}</a>')
                  .then((_) => router.config(
                            [new Route({path: '/user/:name', component: UserCmp, name: 'User'})]))
                  .then((_) => router.navigateByUrl('/a/b'))
@@ -354,7 +354,7 @@ export function main() {
       };
 
       it('should navigate to link hrefs without params', inject([AsyncTestCompleter], (async) => {
-           compile('<a href="hello" [router-link]="[\'./User\']"></a>')
+           compile('<a href="hello" [routerLink]="[\'./User\']"></a>')
                .then((_) => router.config(
                          [new Route({path: '/user', component: UserCmp, name: 'User'})]))
                .then((_) => router.navigateByUrl('/a/b'))
@@ -375,7 +375,7 @@ export function main() {
       it('should navigate to link hrefs in presence of base href',
          inject([AsyncTestCompleter], (async) => {
            location.setBaseHref('/base');
-           compile('<a href="hello" [router-link]="[\'./User\']"></a>')
+           compile('<a href="hello" [routerLink]="[\'./User\']"></a>')
                .then((_) => router.config(
                          [new Route({path: '/user', component: UserCmp, name: 'User'})]))
                .then((_) => router.navigateByUrl('/a/b'))
@@ -415,7 +415,7 @@ class UserCmp {
 @Component({
   selector: 'page-cmp',
   template:
-      `page #{{pageNumber}} | <a href="hello" [router-link]="[\'../Page\', {number: nextPage}]">next</a>`,
+      `page #{{pageNumber}} | <a href="hello" [routerLink]="[\'../Page\', {number: nextPage}]">next</a>`,
   directives: [RouterLink]
 })
 class SiblingPageCmp {
@@ -430,7 +430,7 @@ class SiblingPageCmp {
 @Component({
   selector: 'page-cmp',
   template:
-      `page #{{pageNumber}} | <a href="hello" [router-link]="[\'Page\', {number: nextPage}]">next</a>`,
+      `page #{{pageNumber}} | <a href="hello" [routerLink]="[\'Page\', {number: nextPage}]">next</a>`,
   directives: [RouterLink]
 })
 class NoPrefixSiblingPageCmp {
@@ -456,8 +456,8 @@ function parentCmpLoader() {
 
 @Component({
   selector: 'parent-cmp',
-  template: `{ <a [router-link]="['./Grandchild']" class="grandchild-link">Grandchild</a>
-               <a [router-link]="['./BetterGrandchild']" class="better-grandchild-link">Better Grandchild</a>
+  template: `{ <a [routerLink]="['./Grandchild']" class="grandchild-link">Grandchild</a>
+               <a [routerLink]="['./BetterGrandchild']" class="better-grandchild-link">Better Grandchild</a>
                <router-outlet></router-outlet> }`,
   directives: ROUTER_DIRECTIVES
 })
@@ -470,7 +470,7 @@ class ParentCmp {
 
 @Component({
   selector: 'book-cmp',
-  template: `<a href="hello" [router-link]="[\'./Page\', {number: 100}]">{{title}}</a> |
+  template: `<a href="hello" [routerLink]="[\'./Page\', {number: 100}]">{{title}}</a> |
     <router-outlet></router-outlet>`,
   directives: ROUTER_DIRECTIVES
 })
@@ -482,7 +482,7 @@ class BookCmp {
 
 @Component({
   selector: 'book-cmp',
-  template: `<a href="hello" [router-link]="[\'Page\', {number: 100}]">{{title}}</a> |
+  template: `<a href="hello" [routerLink]="[\'Page\', {number: 100}]">{{title}}</a> |
     <router-outlet></router-outlet>`,
   directives: ROUTER_DIRECTIVES
 })
@@ -494,7 +494,7 @@ class NoPrefixBookCmp {
 
 @Component({
   selector: 'book-cmp',
-  template: `<a href="hello" [router-link]="[\'Book\', {number: 100}]">{{title}}</a> |
+  template: `<a href="hello" [routerLink]="[\'Book\', {number: 100}]">{{title}}</a> |
     <router-outlet></router-outlet>`,
   directives: ROUTER_DIRECTIVES
 })
@@ -507,7 +507,7 @@ class AmbiguousBookCmp {
 @Component({
   selector: 'aux-cmp',
   template:
-      `<a [router-link]="[\'./Hello\', [ \'Aside\' ] ]">aside</a> |
+      `<a [routerLink]="[\'./Hello\', [ \'Aside\' ] ]">aside</a> |
     <router-outlet></router-outlet> | aside <router-outlet name="aside"></router-outlet>`,
   directives: ROUTER_DIRECTIVES
 })

modules/angular2/test/router/router_link_spec.ts

@@ -37,7 +37,7 @@ let dummyInstruction =
     new ResolvedInstruction(new ComponentInstruction('detail', [], null, null, true, 0), null, {});
 
 export function main() {
-  describe('router-link directive', function() {
+  describe('routerLink directive', function() {
     var tcb: TestComponentBuilder;
 
     beforeEachProviders(() => [
@@ -113,16 +113,16 @@ class UserCmp {
 @View({
   template: `
     <div>
-      <a [router-link]="['/Detail']"
+      <a [routerLink]="['/Detail']"
          class="detail-view">
            detail view
       </a>
-      <a [router-link]="['/Detail']"
+      <a [routerLink]="['/Detail']"
          class="detail-view-self"
          target="_self">
            detail view with _self target
       </a>
-      <a [router-link]="['/Detail']"
+      <a [routerLink]="['/Detail']"
          class="detail-view-blank"
          target="_blank">
            detail view with _blank target

modules/angular2/test/testing/test_component_builder_spec.ts

@@ -39,7 +39,7 @@ class ParentComp {
 }
 
 @Component({selector: 'my-if-comp'})
-@View({template: `MyIf(<span *ng-if="showMore">More</span>)`, directives: [NgIf]})
+@View({template: `MyIf(<span *ngIf="showMore">More</span>)`, directives: [NgIf]})
 @Injectable()
 class MyIfComp {
   showMore: boolean = false;

modules/angular2/test/testing/testing_public_spec.ts

@@ -43,7 +43,7 @@ class ParentComp {
 }
 
 @Component({selector: 'my-if-comp'})
-@View({template: `MyIf(<span *ng-if="showMore">More</span>)`, directives: [NgIf]})
+@View({template: `MyIf(<span *ngIf="showMore">More</span>)`, directives: [NgIf]})
 @Injectable()
 class MyIfComp {
   showMore: boolean = false;

modules/angular2/test/upgrade/upgrade_spec.ts

@@ -251,9 +251,9 @@ export function main() {
                Component({
                  selector: 'ng2',
                  template:
-                     '<ng1 full-name="{{last}}, {{first}}" [model-a]="first" [(model-b)]="last" ' +
+                     '<ng1 fullName="{{last}}, {{first}}" [modelA]="first" [(modelB)]="last" ' +
                          '(event)="event=$event"></ng1>' +
-                         '<ng1 full-name="{{\'TEST\'}}" model-a="First" model-b="Last"></ng1>' +
+                         '<ng1 fullName="{{\'TEST\'}}" modelA="First" modelB="Last"></ng1>' +
                          '{{event}}-{{last}}, {{first}}',
                  directives: [adapter.upgradeNg1Component('ng1')]
                })

modules/angular2/test/web_workers/worker/renderer_integration_spec.ts

@@ -170,8 +170,8 @@ export function main() {
                  renderer.setElementStyle(elr, 'width', null);
                  expect(DOM.getStyle(el, 'width')).toEqual('');
 
-                 renderer.setElementAttribute(elr, 'someAttr', 'someValue');
-                 expect(DOM.getAttribute(el, 'some-attr')).toEqual('someValue');
+                 renderer.setElementAttribute(elr, 'someattr', 'someValue');
+                 expect(DOM.getAttribute(el, 'someattr')).toEqual('someValue');
                };
 
                // root element
@@ -186,7 +186,7 @@ export function main() {
     it('should add and remove fragments',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          tcb.overrideView(MyComp, new ViewMetadata({
-                            template: '<template [ng-if]="ctxBoolProp">hello</template>',
+                            template: '<template [ngIf]="ctxBoolProp">hello</template>',
                             directives: [NgIf]
                           }))
              .createAsync(MyComp)

modules/angular2_material/src/components/button/button.scss

@@ -150,18 +150,18 @@ $md-fab-mini-line-height: rem(4.00) !default;
 }
 
 
-[md-button] {
+[mdButton] {
   @include md-button-base();
 }
 
-[md-raised-button] {
+[mdRaisedButton] {
   @include md-raised-button();
 
   color: md-color($md-background, default-contrast);
   background-color: md-color($md-background, 50);
 }
 
-[md-fab] {
+[mdFab] {
   @include md-raised-button();
 
   z-index: $z-index-fab;
@@ -183,7 +183,7 @@ $md-fab-mini-line-height: rem(4.00) !default;
 // Styles for high contrast mode.
 @media screen and (-ms-high-contrast: active) {
   [md-raised],
-  [md-fab] {
+  [mdFab] {
     border: 1px solid #fff;
   }
 }

modules/angular2_material/src/components/button/button.ts

@@ -8,7 +8,7 @@ import {isPresent} from 'angular2/src/facade/lang';
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
 
 @Component({
-  selector: '[md-button]:not(a), [md-fab]:not(a), [md-raised-button]:not(a)',
+  selector: '[mdButton]:not(a), [mdFab]:not(a), [mdRaisedButton]:not(a)',
   host: {
     '(mousedown)': 'onMousedown()',
     '(focus)': 'onFocus()',
@@ -48,7 +48,7 @@ export class MdButton {
 
 
 @Component({
-  selector: 'a[md-button], a[md-raised-button], a[md-fab]',
+  selector: 'a[mdButton], a[mdRaisedButton], a[mdFab]',
   inputs: ['disabled'],
   host: {
     '(click)': 'onClick($event)',

modules/angular2_material/test/button_spec.ts

@@ -34,7 +34,7 @@ export function main() {
 
     beforeEach(inject([TestComponentBuilder], (tcb) => { builder = tcb; }));
 
-    describe('button[md-button]', () => {
+    describe('button[mdButton]', () => {
       it('should handle a click on the button', inject([AsyncTestCompleter], (async) => {
            builder.createAsync(TestApp).then(fixture => {
              let testComponent = fixture.debugElement.componentInstance;
@@ -71,8 +71,8 @@ export function main() {
          }), 10000);
     });
 
-    describe('a[md-button]', () => {
-      const anchorTemplate = `<a md-button href="http://google.com" [disabled]="isDisabled">Go</a>`;
+    describe('a[mdButton]', () => {
+      const anchorTemplate = `<a mdButton href="http://google.com" [disabled]="isDisabled">Go</a>`;
 
       beforeEach(() => {
         builder = builder.overrideView(
@@ -118,7 +118,7 @@ function getChildDebugElement(parent: DebugElement, tagName: string): DebugEleme
 @View({
   directives: [MdButton],
   template:
-      `<button md-button type="button" (click)="increment()" [disabled]="isDisabled">Go</button>`
+      `<button mdButton type="button" (click)="increment()" [disabled]="isDisabled">Go</button>`
 })
 class TestApp {
   clickCount: number = 0;

modules/benchmarks/src/costs/index.ts

@@ -63,16 +63,16 @@ class DynamicDummy {
 @View({
   directives: [NgIf, NgFor, DummyComponent, DummyDirective, DynamicDummy],
   template: `
-    <div *ng-if="testingPlainComponents">
-      <dummy *ng-for="#i of list"></dummy>
+    <div *ngIf="testingPlainComponents">
+      <dummy *ngFor="#i of list"></dummy>
     </div>
 
-    <div *ng-if="testingWithDirectives">
-      <dummy dummy-decorator *ng-for="#i of list"></dummy>
+    <div *ngIf="testingWithDirectives">
+      <dummy dummy-decorator *ngFor="#i of list"></dummy>
     </div>
 
-    <div *ng-if="testingDynamicComponents">
-      <dynamic-dummy *ng-for="#i of list"></dynamic-dummy>
+    <div *ngIf="testingDynamicComponents">
+      <dynamic-dummy *ngFor="#i of list"></dynamic-dummy>
     </div>
   `
 })

modules/benchmarks/src/largetable/largetable_benchmark.ts

@@ -214,29 +214,29 @@ class CellData {
 @View({
   directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault],
   template: `
-      <table [ng-switch]="benchmarkType">
-        <tbody template="ng-switch-when 'interpolation'">
-          <tr template="ng-for #row of data">
-            <td template="ng-for #column of row">
+      <table [ngSwitch]="benchmarkType">
+        <tbody template="ngSwitchWhen 'interpolation'">
+          <tr template="ngFor #row of data">
+            <td template="ngFor #column of row">
               {{column.i}}:{{column.j}}|
             </td>
           </tr>
         </tbody>
-        <tbody template="ng-switch-when 'interpolationAttr'">
-          <tr template="ng-for #row of data">
-            <td template="ng-for #column of row" attr.i="{{column.i}}" attr.j="{{column.j}}">
+        <tbody template="ngSwitchWhen 'interpolationAttr'">
+          <tr template="ngFor #row of data">
+            <td template="ngFor #column of row" attr.i="{{column.i}}" attr.j="{{column.j}}">
               i,j attrs
             </td>
           </tr>
         </tbody>
-        <tbody template="ng-switch-when 'interpolationFn'">
-          <tr template="ng-for #row of data">
-            <td template="ng-for #column of row">
+        <tbody template="ngSwitchWhen 'interpolationFn'">
+          <tr template="ngFor #row of data">
+            <td template="ngFor #column of row">
               {{column.iFn()}}:{{column.jFn()}}|
             </td>
           </tr>
         </tbody>
-        <tbody template="ng-switch-default">
+        <tbody template="ngSwitchDefault">
           <tr>
             <td>
               <em>{{benchmarkType}} not yet implemented</em>
@@ -261,7 +261,7 @@ class LargetableComponent {
 @Component({selector: 'app'})
 @View({
   directives: [LargetableComponent],
-  template: `<largetable [data]='data' [benchmark-type]='benchmarkType'></largetable>`
+  template: `<largetable [data]='data' [benchmarkType]='benchmarkType'></largetable>`
 })
 class AppComponent {
   data;

modules/benchmarks/src/naive_infinite_scroll/app.ts

@@ -17,9 +17,9 @@ import {Component, Directive, View} from 'angular2/angular2';
     <div style="display: flex">
       <scroll-area id="testArea"></scroll-area>
     </div>
-    <div template="ng-if scrollAreas.length > 0">
+    <div template="ngIf scrollAreas.length > 0">
       <p>Following tables are only here to add weight to the UI:</p>
-      <scroll-area template="ng-for #scrollArea of scrollAreas"></scroll-area>
+      <scroll-area template="ngFor #scrollArea of scrollAreas"></scroll-area>
     </div>
   </div>`
 })

modules/benchmarks/src/naive_infinite_scroll/cells.ts

@@ -42,7 +42,7 @@ export class Stage {
   directives: [NgFor],
   template: `
       <div [style.width.px]="cellWidth">
-          <button template="ng-for #stage of stages"
+          <button template="ngFor #stage of stages"
                   [disabled]="stage.isDisabled"
                   [style.background-color]="stage.backgroundColor"
                   on-click="setStage(stage)">

modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts

@@ -30,7 +30,7 @@ import {NgFor} from 'angular2/common';
             <div id="padding"></div>
             <div id="inner">
                 <scroll-item
-                    template="ng-for #item of visibleItems"
+                    template="ngFor #item of visibleItems"
                     [offering]="item">
                 </scroll-item>
             </div>

modules/benchmarks/src/static_tree/tree_benchmark.ts

@@ -308,7 +308,7 @@ class StaticTreeComponent9 extends StaticTreeComponentBase {
 @Component({selector: 'app'})
 @View({
   directives: [StaticTreeComponent9, NgIf],
-  template: `<tree *ng-if="initData != null" [data]='initData'></tree>`
+  template: `<tree *ngIf="initData != null" [data]='initData'></tree>`
 })
 class AppComponentWithStaticTree {
   initData: TreeNode;

modules/benchmarks/src/tree/tree_benchmark.ts

@@ -223,7 +223,7 @@ class BaseLineIf {
 @View({
   directives: [TreeComponent, NgIf],
   template:
-      `<span> {{data.value}} <span template='ng-if data.right != null'><tree [data]='data.right'></tree></span><span template='ng-if data.left != null'><tree [data]='data.left'></tree></span></span>`
+      `<span> {{data.value}} <span template='ngIf data.right != null'><tree [data]='data.right'></tree></span><span template='ngIf data.left != null'><tree [data]='data.left'></tree></span></span>`
 })
 class TreeComponent {
   data: TreeNode;

modules/playground/e2e_test/material/button_spec.ts

@@ -1,6 +1,6 @@
 import {verifyNoBrowserErrors} from 'angular2/src/testing/e2e_util';
 
-describe('md-button', function() {
+describe('mdButton', function() {
   var url = 'playground/src/material/button/index.html';
 
   beforeEach(() => { browser.get(url); });

modules/playground/src/animate/animate-app.ts

@@ -5,7 +5,7 @@ import {Component, View, NgIf} from 'angular2/angular2';
   directives: [NgIf],
   template: `
     <h1>The box is {{visible ? 'visible' : 'hidden'}}</h1>
-    <div class="ng-animate box" *ng-if="visible"></div>
+    <div class="ng-animate box" *ngIf="visible"></div>
     <button (click)="visible = !visible">Animate</button>
   `
 })

modules/playground/src/async/index.ts

@@ -13,17 +13,17 @@ import {TimerWrapper} from 'angular2/src/facade/async';
     <div id='delayedIncrement'>
       <span class='val'>{{val2}}</span>
       <button class='action' (click)="delayedIncrement()">Delayed Increment</button>
-      <button class='cancel' *ng-if="timeoutId != null" (click)="cancelDelayedIncrement()">Cancel</button>
+      <button class='cancel' *ngIf="timeoutId != null" (click)="cancelDelayedIncrement()">Cancel</button>
     </div>
     <div id='multiDelayedIncrements'>
       <span class='val'>{{val3}}</span>
       <button class='action' (click)="multiDelayedIncrements(10)">10 Delayed Increments</button>
-      <button class='cancel' *ng-if="multiTimeoutId != null" (click)="cancelMultiDelayedIncrements()">Cancel</button>
+      <button class='cancel' *ngIf="multiTimeoutId != null" (click)="cancelMultiDelayedIncrements()">Cancel</button>
     </div>
     <div id='periodicIncrement'>
       <span class='val'>{{val4}}</span>
       <button class='action' (click)="periodicIncrement()">Periodic Increment</button>
-      <button class='cancel' *ng-if="intervalId != null" (click)="cancelPeriodicIncrement()">Cancel</button>
+      <button class='cancel' *ngIf="intervalId != null" (click)="cancelPeriodicIncrement()">Cancel</button>
     </div>
   `,
   directives: [NgIf]

modules/playground/src/hash_routing/index.ts

@@ -28,8 +28,8 @@ class GoodByeCmp {
     <h1>My App</h1>
     <nav>
       <a href="#/" id="hello-link">Navigate via href</a> |
-      <a [router-link]="['/GoodbyeCmp']" id="goodbye-link">Navigate with Link DSL</a>
-      <a [router-link]="['/GoodbyeCmp']" id="goodbye-link-blank" target="_blank">
+      <a [routerLink]="['/GoodbyeCmp']" id="goodbye-link">Navigate with Link DSL</a>
+      <a [routerLink]="['/GoodbyeCmp']" id="goodbye-link-blank" target="_blank">
         Navigate with Link DSL _blank target
       </a>
     </nav>

modules/playground/src/http/http_comp.ts

@@ -8,7 +8,7 @@ import 'rxjs/add/operator/map';
   template: `
     <h1>people</h1>
     <ul class="people">
-      <li *ng-for="#person of people">
+      <li *ngFor="#person of people">
         hello, {{person['name']}}
       </li>
     </ul>

modules/playground/src/jsonp/jsonp_comp.ts

@@ -8,7 +8,7 @@ import {ObservableWrapper} from 'angular2/src/facade/async';
   template: `
     <h1>people</h1>
     <ul class="people">
-      <li *ng-for="#person of people">
+      <li *ngFor="#person of people">
         hello, {{person['name']}}
       </li>
     </ul>

modules/playground/src/material/button/demo_app.html

@@ -35,7 +35,7 @@
 
 <section>
   <form (submit)="submit('form submit')">
-    <button md-button>SUBMIT</button>
+    <button mdButton>SUBMIT</button>
     <button>Native button</button>
   </form>
 
@@ -45,44 +45,44 @@
 <section>
   <span class="label">Regular button</span>
 
-  <button md-button (click)="click('button')">BUTTON</button>
+  <button mdButton (click)="click('button')">BUTTON</button>
 
-  <button md-button class="md-primary" (click)="click('primary')">PRIMARY</button>
-  <button md-button disabled="disabled" (click)="click('disabled')">DISABLED</button>
-  <button md-button class="md-accent" (click)="click('accent')">ACCENT</button>
-  <button md-button class="md-warn" (click)="click('warn')">WARN</button>
-  <button md-button class="custom" (click)="click('custom')">CUSTOM</button>
+  <button mdButton class="md-primary" (click)="click('primary')">PRIMARY</button>
+  <button mdButton disabled="disabled" (click)="click('disabled')">DISABLED</button>
+  <button mdButton class="md-accent" (click)="click('accent')">ACCENT</button>
+  <button mdButton class="md-warn" (click)="click('warn')">WARN</button>
+  <button mdButton class="custom" (click)="click('custom')">CUSTOM</button>
 </section>
 
 <section>
   <span class="label">Raised button</span>
-  <button md-raised-button (click)="click('raised')">BUTTON</button>
-  <button md-raised-button class="md-primary" (click)="click('raised primary')">PRIMARY</button>
-  <button md-raised-button disabled="disabled" (click)="click('raised disabled')">DISABLED</button>
-  <button md-raised-button class="md-accent" (click)="click('raised accent')">ACCENT</button>
-  <button md-raised-button class="md-warn" (click)="click('raised warn')">WARN</button>
-  <button md-raised-button class="custom" (click)="click('custom raised')">CUSTOM</button>
+  <button mdRaisedButton (click)="click('raised')">BUTTON</button>
+  <button mdRaisedButton class="md-primary" (click)="click('raised primary')">PRIMARY</button>
+  <button mdRaisedButton disabled="disabled" (click)="click('raised disabled')">DISABLED</button>
+  <button mdRaisedButton class="md-accent" (click)="click('raised accent')">ACCENT</button>
+  <button mdRaisedButton class="md-warn" (click)="click('raised warn')">WARN</button>
+  <button mdRaisedButton class="custom" (click)="click('custom raised')">CUSTOM</button>
 </section>
 <section>
   <span class="label">Fab button</span>
-  <button md-fab (click)="click('fab')">BTN</button>
-  <button md-fab class="md-primary" (click)="click('fab primary')">PRMY</button>
-  <button md-fab disabled="disabled" (click)="click('fab disabled')">DIS</button>
-  <button md-fab class="md-accent" (click)="click('fab accent')">ACC</button>
-  <button md-fab class="md-warn" (click)="click('fab warn')">WRN</button>
-  <button md-fab class="custom" (click)="click('custom fab')">CSTM</button>
+  <button mdFab (click)="click('fab')">BTN</button>
+  <button mdFab class="md-primary" (click)="click('fab primary')">PRMY</button>
+  <button mdFab disabled="disabled" (click)="click('fab disabled')">DIS</button>
+  <button mdFab class="md-accent" (click)="click('fab accent')">ACC</button>
+  <button mdFab class="md-warn" (click)="click('fab warn')">WRN</button>
+  <button mdFab class="custom" (click)="click('custom fab')">CSTM</button>
 </section>
 <section>
   <span class="label">Anchor / hyperlink</span>
-  <a md-button href="http://google.com" target="_blank">HREF</a>
-  <a md-button href="http://google.com" disabled>DISABLED HREF</a>
-  <a md-raised-button target="_blank" href="http://google.com">RAISED HREF</a>
+  <a mdButton href="http://google.com" target="_blank">HREF</a>
+  <a mdButton href="http://google.com" disabled>DISABLED HREF</a>
+  <a mdRaisedButton target="_blank" href="http://google.com">RAISED HREF</a>
 </section>
 
 <section dir="rtl">
   <span class="label" dir="ltr">Right-to-left</span>
-  <button md-button (click)="click('Hebrew button')">לחצן</button>
-  <button md-raised-button (click)="click('Hebrew raised button')">העלה</button>
-  <a md-button href="http://translate.google.com">עוגן</a>
+  <button mdButton (click)="click('Hebrew button')">לחצן</button>
+  <button mdRaisedButton (click)="click('Hebrew raised button')">העלה</button>
+  <a mdButton href="http://translate.google.com">עוגן</a>
 </section>
 

modules/playground/src/model_driven_forms/index.ts

@@ -42,7 +42,7 @@ function creditCardValidator(c): {[key: string]: boolean} {
 @Component({selector: 'show-error', inputs: ['controlPath: control', 'errorTypes: errors']})
 @View({
   template: `
-    <span *ng-if="errorMessage !== null">{{errorMessage}}</span>
+    <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
   `,
   directives: [NgIf]
 })
@@ -78,52 +78,52 @@ class ShowError {
   template: `
     <h1>Checkout Form (Model Driven)</h1>
 
-    <form (ng-submit)="onSubmit()" [ng-form-model]="form" #f="ngForm">
+    <form (ngSubmit)="onSubmit()" [ngFormModel]="form" #f="ngForm">
       <p>
         <label for="firstName">First Name</label>
-        <input type="text" id="firstName" ng-control="firstName">
+        <input type="text" id="firstName" ngControl="firstName">
         <show-error control="firstName" [errors]="['required']"></show-error>
       </p>
 
       <p>
         <label for="middleName">Middle Name</label>
-        <input type="text" id="middleName" ng-control="middleName">
+        <input type="text" id="middleName" ngControl="middleName">
       </p>
 
       <p>
         <label for="lastName">Last Name</label>
-        <input type="text" id="lastName" ng-control="lastName">
+        <input type="text" id="lastName" ngControl="lastName">
         <show-error control="lastName" [errors]="['required']"></show-error>
       </p>
 
       <p>
         <label for="country">Country</label>
-        <select id="country" ng-control="country">
-          <option *ng-for="#c of countries" [value]="c">{{c}}</option>
+        <select id="country" ngControl="country">
+          <option *ngFor="#c of countries" [value]="c">{{c}}</option>
         </select>
       </p>
 
       <p>
         <label for="creditCard">Credit Card</label>
-        <input type="text" id="creditCard" ng-control="creditCard">
+        <input type="text" id="creditCard" ngControl="creditCard">
         <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
       </p>
 
       <p>
         <label for="amount">Amount</label>
-        <input type="number" id="amount" ng-control="amount">
+        <input type="number" id="amount" ngControl="amount">
         <show-error control="amount" [errors]="['required']"></show-error>
       </p>
 
       <p>
         <label for="email">Email</label>
-        <input type="email" id="email" ng-control="email">
+        <input type="email" id="email" ngControl="email">
         <show-error control="email" [errors]="['required']"></show-error>
       </p>
 
       <p>
         <label for="comments">Comments</label>
-        <textarea id="comments" ng-control="comments">
+        <textarea id="comments" ngControl="comments">
         </textarea>
       </p>
 

modules/playground/src/observable_models/app.dart

@@ -22,9 +22,9 @@ const binding = const Binding(IterableDiffers,
     <div style="display: flex">
       <scroll-area id="testArea"></scroll-area>
     </div>
-    <div template="ng-if scrollAreas.length > 0">
+    <div template="ngIf scrollAreas.length > 0">
       <p>Following tables are only here to add weight to the UI:</p>
-      <scroll-area template="ng-for #scrollArea of scrollAreas"></scroll-area>
+      <scroll-area template="ngFor #scrollArea of scrollAreas"></scroll-area>
     </div>
   </div>''')
 class App {