vicb · Dec 3, 2015 · Nov 24, 2015 · Nov 24, 2015
diff --git a/modules/angular2/docs/cheatsheet/built-in-directives.md b/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.
+
diff --git a/modules/angular2/docs/cheatsheet/forms.md b/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.
diff --git a/modules/angular2/docs/cheatsheet/routing.md b/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.
 

diff --git a/modules/angular2/docs/cheatsheet/template-syntax.md b/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:

diff --git a/modules/angular2/docs/core/01_templates.md b/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,30 +383,30 @@ 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
 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.

diff --git a/modules/angular2/docs/core/02_directives.md b/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.

diff --git a/modules/angular2/docs/core/10_view.md b/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>
 ```
 

diff --git a/modules/angular2/docs/migration/kebab-case.md b/modules/angular2/docs/migration/kebab-case.md
@@ -0,0 +1,162 @@
+Angular2 templates are now case sensitive.
+
+## Overview
+
+Where you used to write:
+
+    <my-cmp (some-event)="someAction()" [some-property]="expression" #some-var>
+
+in order to:
+  - bind to the `someEvent` event,
+  - bind to the `someProperty` property,
+  - create a `someVar` local variable
+
+You should now write:
+
+    <my-cmp (someEvent)="someAction()" [someProperty]="expression" #someVar>
+
+Notes:
+  - while tag name are case sensitive, the best practice is to use dash case for component elements so that the browser
+    interpret them as custom elements,
+  - `(some-event)` would now bind to the `some-event` event (i.e. there is no implicit dash to camel case conversion),
+  - `(some-property)` would now bind to the `some-property` property (i.e. there is no implicit dash to camel case conversion),
+  - `#some-var` is not allowed any more ("-" can not be used in variable names).
+
+## Migration
+
+#### Templates
+
+1. Directives selectors, property bindings, event bindings, template variables and template element attributes should be changed to camel case: 
+
+Examples:
+- `<p *ng-if="cond">` should be changed to `<p *ngIf="cond">`,
+- `<my-cmp [my-prop]="exp">` should be changed to `<my-cmp [myProp]="exp">`,
+- `<my-cmp (my-event)="action()">` should be changed to `<my-cmp (myEvent)="action()">`,
+- `<my-cmp [(my-prop)]="prop">` should be changed to `<my-cmp [(myProp)]="prop">`,
+- `<input #my-input>` should be changed to `<input #myInput>`,
+- `<template ng-for #my-item [ng-for-of]=items #my-index="index">` should be changed to `<template ngFor="#my-item" [ngForOf]=items #myIndex="index">`,
+
+Note: while the tag names are now case sensitive the best practice is to keep them lower dash cased so that the browser 
+treat them as custom elements. This explains why the `<router-outlet>` component is left unchanged.
+
+`on-`, `bindon-`, `bind-` and `var-` prefixes are still part of the canonical syntax and should remain unchanged (lower cased):
+- `on-some-event` should be changed to `on-someEvent`,
+- `bind-my-prop` should be changed to `bind-myProp`,
+- `bindon-my-prop` should be changed to `bindon-myProp`,
+- `var-my-var` should be changed to `var-myVar`.
+
+2. Update variable binding
+
+- `<p #var1="a-b" var-var2="c-d">` should be changed to `<p #var1="aB" var-var2="cD">`  
+
+3. The `template` attribute values should also be updated in the same way
+
+`<p template="ng-for #my-item of items #my-index = index">` should be changed to `<p template="ngFor #myItem of items #myIndex = index">`.
+
+Note that both angular directives and your own directives must be updated in the same way.
+
+#### Directives and Components
+
+Take the following steps to upgrade your directives and components:
+
+1. Update the selector:
+
+    @Directive({selector: 'tag[attr][name=value]'})
+    @Component({selector: 'tag[attr][name=value]'})
+
+Tag and attributes names are case sensitive:
+- For tag names, the best practice is to keep them lower dash cased, do not update them,
+- For attribute names, the best practice is to convert them from lower dash case to camel case.
+
+Examples:
+- `custom-tag` should stay `custom-tag` (do not update tag names),
+- `[attr-name]` should be updated to `[attrName]`,
+- `[attr-name=someValue]` should be updated to `[attrName=someValue]`,
+- `custom-tag[attr-name=someValue]` should be updated to `custom-tag[attrName=someValue]`
+
+Note: attribute values and classes are still matched case insensitive.
+
+2. Update the inputs
+
+    @Directive({inputs: ['myProp', 'myOtherProp: my-attr-name']})
+
+As attribute names are now case sensitive, they should be converted from dash to camel case where they are specified.
+The previous decorator becomes:
+
+    @Directive({inputs: ['myProp', 'myOtherProp: myAttrName']})
+
+Notes:
+  - only the long syntax (with ":") needs not be updated,
+  - `properties` is the legacy name for `inputs` and should be updated in the same way - it is a good idea to replace
+    `properties` with `inputs` at the same time as support for the former will be removed soon. 
+
+The same applies for the `@Input` decorator:
+
+    @Input() myProp;
+    @Input('my-attr-name') myProp;
+
+That is they only need to be updated when the attribute name is specified:  
+
+    @Input() myProp;               // Nothing to update
+    @Input('myAttrName') myProp;   // Convert the attribute name to camel case 
+
+3. Update the outputs
+
+Update the outputs in the same way the inputs are updated:
+
+    @Directive({outputs: ['myEvent', 'myOtherEvent: my-event-name']})
+
+should be updated to 
+
+    @Directive({outputs: ['myEvent', 'myOtherEvent: myEventName']})
+
+If you use `events` instead of `outputs` you should update in the same way and switch to `outputs` as `events` is deprecated.
+
+    @Output() myEvent;
+    @Output('my-event-name') myEvent;
+
+should be changed to   
+
+    @Output() myEvent;
+    @Output('myEventName') myEvent;
+
+4. Update the host bindings
+
+    @Directive({
+      host: {
+        '[some-prop]': 'exp',
+        '[style.background-color]': 'exp',
+        '[class.some-class]': 'exp',
+        '(some-event)': 'action()',
+        'some-attr': 'value'
+      }
+    })
+
+should be changed to: 
+
+    @Directive({
+      host: {
+        '[someProp]': 'exp',
+        '[style.background-color]': 'exp',
+        '[class.some-class]': 'exp',
+        '(someEvent)': 'action()',
+        'some-attr': 'value'
+      }
+    })
+
+The property bindings (`[...]`) and event bindings (`(...)`) must be updated in the same way as they are updated in a 
+template (reminder: `[attr.]`, `[class.]` and `[style.]` should not be converted to camel case).
+
+5. Update export name
+
+    @Directive({
+      exportAs: 'some-name'
+    })
+
+should be changed to     
+
+    @Directive({
+      exportAs: 'someName'
+    })
+
+
diff --git a/modules/angular2/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts b/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>

diff --git a/modules/angular2/examples/router/ts/can_activate/can_activate_example.ts b/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]

diff --git a/modules/angular2/examples/router/ts/can_deactivate/can_deactivate_example.ts b/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]

diff --git a/modules/angular2/examples/router/ts/on_activate/on_activate_example.ts b/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>
   `,
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
     ```
@@ Expand Down @@