diff --git a/public/docs/_examples/style-guide/e2e-spec.ts b/public/docs/_examples/style-guide/e2e-spec.ts
index c0fedf822e..f760d62270 100644
--- a/public/docs/_examples/style-guide/e2e-spec.ts
+++ b/public/docs/_examples/style-guide/e2e-spec.ts
@@ -206,4 +206,114 @@ describe('Style Guide', function () {
     let button = element(by.tagName('sg-app > toh-hero-button > button'));
     expect(button.getText()).toBe('OK');
   });
+
+  it('11-01', function () {
+    browser.get('#/11-01');
+
+    let div = element(by.tagName('sg-app div'));
+    expect(div.getText()).toBe('I am a page set to US English');
+  });
+
+  it('11-02', function () {
+    browser.get('#/11-02');
+
+    let labels = element.all(by.tagName('sg-app label'));
+    expect(labels.get(0).getText()).toBe('Name:');
+    expect(labels.get(1).getText()).toBe('Surname:');
+    let inputs = element.all(by.tagName('sg-app label input'));
+    expect(inputs.get(0).isPresent()).toBe(true);
+    expect(inputs.get(1).isPresent()).toBe(true);
+  });
+
+  it('11-03', function () {
+    browser.get('#/11-03');
+
+    let button = element(by.tagName('sg-app button'));
+    expect(button.getText()).toBe('Press me');
+  });
+
+  it('11-05', function () {
+    browser.get('#/11-05');
+
+    let dts = element.all(by.tagName('sg-app dt'));
+    expect(dts.get(0).getText()).toBe('Name:');
+    expect(dts.get(1).getText()).toBe('Power:');
+    let dds = element.all(by.tagName('sg-app dd'));
+    expect(dds.get(0).getText()).toBe('Windstorm');
+    expect(dds.get(1).getText()).toBe('Air');
+  });
+
+  it('11-06', function () {
+    browser.get('#/11-06');
+
+    let labels = element.all(by.tagName('sg-app label'));
+    expect(labels.get(0).getText()).toBe('Name:');
+    expect(labels.get(1).getText()).toBe('Air');
+    expect(labels.get(2).getText()).toBe('Fire');
+    expect(labels.get(3).getText()).toBe('Name:');
+    expect(labels.get(4).getText()).toBe('Air');
+    expect(labels.get(5).getText()).toBe('Fire');
+    let legends = element.all(by.tagName('fieldset legend'));
+    expect(legends.get(0).getText()).toBe('Power options');
+    expect(legends.get(1).getText()).toBe('Power options');
+    let inputs = element.all(by.css('sg-app input:not([type="radio"])'));
+    expect(inputs.get(0).isPresent()).toBe(true);
+    expect(inputs.get(1).isPresent()).toBe(true);
+    let radios = element.all(by.css('sg-app input[type="radio"]'));
+    expect(radios.get(0).isPresent()).toBe(true);
+    expect(radios.get(1).isPresent()).toBe(true);
+    expect(radios.get(2).isPresent()).toBe(true);
+    expect(radios.get(3).isPresent()).toBe(true);
+  });
+
+  it('11-07', function () {
+    browser.get('#/11-07');
+
+    let button = element(by.tagName('sg-app button'));
+    expect(button.getText()).toBe('Alert User');
+    let anchor = element(by.tagName('sg-app a'));
+    expect(anchor.getText()).toBe('Go to Angular!');
+  });
+
+  it('11-08', function () {
+    browser.get('#/11-08');
+
+    let ths = element.all(by.tagName('sg-app th'));
+    expect(ths.get(0).getText()).toBe('Hero Id');
+    expect(ths.get(1).getText()).toBe('Hero Name');
+    expect(ths.get(2).getText()).toBe('Delete Hero');
+    let trs = element.all(by.tagName('sg-app tr'));
+    let row1Tds = trs.get(0).all(by.tagName('td'));
+    expect(row1Tds.get(0).getText()).toBe('1');
+    expect(row1Tds.get(1).getText()).toBe('Windstorm');
+    let row2Tds = trs.get(1).all(by.tagName('td'));
+    expect(row2Tds.get(0).getText()).toBe('2');
+    expect(row2Tds.get(1).getText()).toBe('Bombasto');
+    let row3Tds = trs.get(2).all(by.tagName('td'));
+    expect(row3Tds.get(0).getText()).toBe('3');
+    expect(row3Tds.get(1).getText()).toBe('Magneta');
+    let row4Tds = trs.get(3).all(by.tagName('td'));
+    expect(row4Tds.get(0).getText()).toBe('4');
+    expect(row4Tds.get(1).getText()).toBe('Tornado');
+    let buttons = element.all(by.tagName('sg-app td button'));
+    expect(buttons.get(0).getText()).toBe('Delete Windstorm');
+    expect(buttons.get(1).getText()).toBe('Delete Bombasto');
+    expect(buttons.get(2).getText()).toBe('Delete Magneta');
+    expect(buttons.get(3).getText()).toBe('Delete Tornado');
+  });
+
+  it('11-09', function () {
+    browser.get('#/11-09');
+
+    let image = element(by.tagName('sg-app img'));
+    expect(image.getAttribute('alt')).toBe('Angular 2 logo');
+  });
+
+  it('11-11', function () {
+    browser.get('#/11-11');
+
+    let span = element(by.css('sg-app span.green-background'));
+    expect(span.getText()).toBe('Current status is OK!');
+  });
+
 });
diff --git a/public/docs/_examples/style-guide/ts/11-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-01/app/app.component.ts
new file mode 100644
index 0000000000..3aea82a610
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-01/app/app.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: `<div>I am a page set to US English</div>`
+})
+export class AppComponent {
+}
diff --git a/public/docs/_examples/style-guide/ts/11-01/app/index.avoid.html b/public/docs/_examples/style-guide/ts/11-01/app/index.avoid.html
new file mode 100644
index 0000000000..fb5755307d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-01/app/index.avoid.html
@@ -0,0 +1,14 @@
+<!-- avoid -->
+
+<!DOCTYPE html>
+<!-- #docregion page-lang-->
+<html>
+<!-- #enddocregion page-lang-->
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<!--Some content-->
+</body>
+</html>
diff --git a/public/docs/_examples/style-guide/ts/11-01/app/index.html b/public/docs/_examples/style-guide/ts/11-01/app/index.html
new file mode 100644
index 0000000000..be3562da68
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-01/app/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<!-- #docregion page-lang-->
+<html lang="en-US">
+<!-- #enddocregion page-lang -->
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+<!--Some content-->
+</body>
+</html>
diff --git a/public/docs/_examples/style-guide/ts/11-01/app/index.ts b/public/docs/_examples/style-guide/ts/11-01/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-01/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-02/app/app.component.avoid.css b/public/docs/_examples/style-guide/ts/11-02/app/app.component.avoid.css
new file mode 100644
index 0000000000..44e200ba76
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-02/app/app.component.avoid.css
@@ -0,0 +1,13 @@
+/* #docregion */
+/* avoid */
+
+:focus {
+  outline: 0;
+}
+
+/* or */
+
+:focus {
+  outline: none;
+}
+/* #enddocregion */
diff --git a/public/docs/_examples/style-guide/ts/11-02/app/app.component.html b/public/docs/_examples/style-guide/ts/11-02/app/app.component.html
new file mode 100644
index 0000000000..b231b9aa5b
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-02/app/app.component.html
@@ -0,0 +1,7 @@
+<label>Name:
+  <input [(ngModel)]="name">
+</label>
+<label>Surname:
+  <input [(ngModel)]="surname">
+</label>
+{{name}}{{surname}}
diff --git a/public/docs/_examples/style-guide/ts/11-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-02/app/app.component.ts
new file mode 100644
index 0000000000..9f97daf2e7
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-02/app/app.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+  name: string;
+  surname: string;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-02/app/index.ts b/public/docs/_examples/style-guide/ts/11-02/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-02/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-03/app/app.component.avoid.html
new file mode 100644
index 0000000000..df41149bc2
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/app.component.avoid.html
@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<div class="button" (click)="saveData()">Press me</div>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/app.component.css b/public/docs/_examples/style-guide/ts/11-03/app/app.component.css
new file mode 100644
index 0000000000..afa3ac490e
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/app.component.css
@@ -0,0 +1,11 @@
+.button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  margin-bottom: 5px;
+  width: 75px;
+  cursor: pointer;
+  cursor: hand;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/app.component.html b/public/docs/_examples/style-guide/ts/11-03/app/app.component.html
new file mode 100644
index 0000000000..2fcbec9a8a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/app.component.html
@@ -0,0 +1,3 @@
+<!-- #docregion-->
+<button (click)="saveData()">Press me</button>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-03/app/app.component.ts
new file mode 100644
index 0000000000..f4ab150a38
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/app.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+
+  saveData() {
+    alert('Button pressed.');
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/index.ts b/public/docs/_examples/style-guide/ts/11-03/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-05/app/app.component.avoid.html
new file mode 100644
index 0000000000..40092d1ea9
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/app.component.avoid.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<div><label>Name: </label>{{hero.name}}</div>
+<div><label>Power: </label>{{hero.power}}</div>
+
+<!--or-->
+
+<div><span>Name: </span>{{hero.name}}</div>
+<div><span>Power: </span>{{hero.power}}</div>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/app.component.css b/public/docs/_examples/style-guide/ts/11-05/app/app.component.css
new file mode 100644
index 0000000000..b5b1eec59f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/app.component.css
@@ -0,0 +1,4 @@
+dl dt {
+  float: left;
+  clear: left;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/app.component.html b/public/docs/_examples/style-guide/ts/11-05/app/app.component.html
new file mode 100644
index 0000000000..2119ba9670
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/app.component.html
@@ -0,0 +1,8 @@
+<!-- #docregion-->
+<dl>
+  <dt>Name:</dt>
+  <dd>{{hero.name}}</dd>
+  <dt>Power:</dt>
+  <dd>{{hero.power}}</dd>
+</dl>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-05/app/app.component.ts
new file mode 100644
index 0000000000..dbe0e4218a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/app.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+
+  hero: any;
+
+  constructor() {
+    this.hero = {name: 'Windstorm', power: 'Air'};
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/index.ts b/public/docs/_examples/style-guide/ts/11-05/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-06/app/app.component.avoid.html
new file mode 100644
index 0000000000..ab80320836
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/app.component.avoid.html
@@ -0,0 +1,24 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<label>Name:</label>
+<input [(ngModel)]="hero.name">
+
+<!--and-->
+
+<span>Name:</span>
+<input [(ngModel)]="hero.name">
+
+<!--and-->
+
+<label >Power options</label>
+<input type="radio"
+       name="hero_power"
+       (click)="hero.power = 'Air'"
+       [checked]="hero.power === 'Air'">
+<input type="radio"
+       name="hero_power_2"
+       (click)="hero.power = 'Fire'"
+       [checked]="hero.power === 'Fire'">
+
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/app.component.css b/public/docs/_examples/style-guide/ts/11-06/app/app.component.css
new file mode 100644
index 0000000000..1ddc75914c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/app.component.css
@@ -0,0 +1,3 @@
+fieldset {
+  margin-bottom: 5px;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/app.component.html b/public/docs/_examples/style-guide/ts/11-06/app/app.component.html
new file mode 100644
index 0000000000..a556d73d00
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/app.component.html
@@ -0,0 +1,43 @@
+<!-- #docregion-->
+<label>Name:
+  <input [(ngModel)]="hero.name">
+</label>
+
+<fieldset>
+  <legend>Power options</legend>
+  <label>Air
+    <input type="radio"
+           name="hero_power"
+           (click)="assignPower('Air')"
+           [checked]="checkPower('Air')">
+  </label>
+  <label>Fire
+    <input type="radio"
+           name="hero_power"
+           (click)="assignPower('Fire')"
+           [checked]="checkPower('Fire')">
+  </label>
+</fieldset>
+
+<!--or-->
+
+<label for="hero_name_id">Name:</label>
+<input id="hero_name_id" [(ngModel)]="hero.name">
+
+<fieldset>
+  <legend>Power options</legend>
+  <label for="radio_air_id">Air</label>
+  <input type="radio"
+         id="radio_air_id"
+         name="hero_power_2"
+         (click)="assignPower('Air')"
+         [checked]="checkPower('Air')">
+  <label for="radio_fire_id">Fire</label>
+  <input type="radio"
+         id="radio_fire_id"
+         name="hero_power_2"
+         (click)="assignPower('Fire')"
+         [checked]="checkPower('Fire')">
+</fieldset>
+
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-06/app/app.component.ts
new file mode 100644
index 0000000000..2af5e4ec08
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/app.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { Hero } from './heroes';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+
+  hero: Hero;
+
+  constructor() {
+    this.hero = new Hero();
+  }
+
+  assignPower(power: string) {
+    this.hero.power = power;
+  }
+
+  checkPower(power: string): boolean {
+    return this.hero.power === power;
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/heroes/index.ts b/public/docs/_examples/style-guide/ts/11-06/app/heroes/index.ts
new file mode 100644
index 0000000000..c3da79f741
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/hero.model.ts
new file mode 100644
index 0000000000..d4aac7c559
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+export class Hero {
+  id: number;
+  name: string;
+  power: string;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/index.ts
new file mode 100644
index 0000000000..0dceb684c4
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/index.ts
@@ -0,0 +1 @@
+export * from './hero.model';
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/index.ts b/public/docs/_examples/style-guide/ts/11-06/app/index.ts
new file mode 100644
index 0000000000..fe8300f1dd
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-07/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-07/app/app.component.avoid.html
new file mode 100644
index 0000000000..774beb0de3
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-07/app/app.component.avoid.html
@@ -0,0 +1,9 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<button (click)="gotoDestination()">Go to Angular!</button>
+
+<!--or-->
+
+<a (click)="alertUser()" href="#">Alert User</a>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-07/app/app.component.html b/public/docs/_examples/style-guide/ts/11-07/app/app.component.html
new file mode 100644
index 0000000000..7b515d2f41
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-07/app/app.component.html
@@ -0,0 +1,7 @@
+<!-- #docregion-->
+<button (click)="alertUser()">Alert User</button>
+
+<!--and-->
+
+<a [attr.href]="destinationUrl">Go to Angular!</a>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-07/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-07/app/app.component.ts
new file mode 100644
index 0000000000..4f46aa5971
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-07/app/app.component.ts
@@ -0,0 +1,18 @@
+// #docregion
+
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+
+  destinationUrl: string = 'http://angular.io';
+
+  alertUser() {
+    alert('You have been alerted!');
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-07/app/index.ts b/public/docs/_examples/style-guide/ts/11-07/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-07/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-08/app/app.component.avoid.html
new file mode 100644
index 0000000000..b13d5898db
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/app.component.avoid.html
@@ -0,0 +1,16 @@
+<table>
+  <thead>
+  <th>Hero Id</th>
+  <th>Hero Name</th>
+  <th>Delete Hero</th>
+  </thead>
+  <!--#docregion-->
+  <tr *ngFor="let hero of heroes">
+    <td>{{hero.id}}</td>
+    <td>{{hero.name}}</td>
+    <td>
+      <button (click)="deleteHero(hero)">Delete</button>
+    </td>
+  </tr>
+  <!--#enddocregion-->
+</table>
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/app.component.html b/public/docs/_examples/style-guide/ts/11-08/app/app.component.html
new file mode 100644
index 0000000000..411b4e458f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/app.component.html
@@ -0,0 +1,16 @@
+<table>
+  <thead>
+  <th>Hero Id</th>
+  <th>Hero Name</th>
+  <th>Delete Hero</th>
+  </thead>
+  <!--#docregion-->
+  <tr *ngFor="let hero of heroes">
+    <td>{{hero.id}}</td>
+    <td>{{hero.name}}</td>
+    <td>
+      <button (click)="deleteHero(hero)">Delete {{hero.name}}</button>
+    </td>
+  </tr>
+  <!--#enddocregion-->
+</table>
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-08/app/app.component.ts
new file mode 100644
index 0000000000..dc4369c878
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/app.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroService } from './heroes';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) {
+  }
+
+  deleteHero(hero: Hero) {
+    this.heroes = this.heroes.filter((element) => {
+      return element.id !== hero.id;
+    });
+  }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/heroes/index.ts b/public/docs/_examples/style-guide/ts/11-08/app/heroes/index.ts
new file mode 100644
index 0000000000..c3da79f741
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.model.ts
new file mode 100644
index 0000000000..8f7cc205c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.service.ts
new file mode 100644
index 0000000000..b5aba5d00c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.service.ts
@@ -0,0 +1,17 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+// #docregion example
+export class HeroService {
+  constructor(private http: Http) { }
+
+  getHeroes() {
+    return this.http.get('api/heroes')
+      .map((response: Response) => <Hero[]>response.json().data);
+  }
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/index.ts
new file mode 100644
index 0000000000..dbb150d3f8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './hero.model';
+export * from './hero.service';
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/index.ts b/public/docs/_examples/style-guide/ts/11-08/app/index.ts
new file mode 100644
index 0000000000..fe8300f1dd
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-09/app/angular.png b/public/docs/_examples/style-guide/ts/11-09/app/angular.png
new file mode 100644
index 0000000000..a1d9790bc3
Binary files /dev/null and b/public/docs/_examples/style-guide/ts/11-09/app/angular.png differ
diff --git a/public/docs/_examples/style-guide/ts/11-09/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-09/app/app.component.avoid.html
new file mode 100644
index 0000000000..e66ea7caa6
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-09/app/app.component.avoid.html
@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<img src="./11-09/app/angular.png">
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-09/app/app.component.html b/public/docs/_examples/style-guide/ts/11-09/app/app.component.html
new file mode 100644
index 0000000000..9182b27dcc
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-09/app/app.component.html
@@ -0,0 +1,3 @@
+<!-- #docregion-->
+<img src="./11-09/app/angular.png" alt="Angular 2 logo">
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-09/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-09/app/app.component.ts
new file mode 100644
index 0000000000..2d5a33ed4d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-09/app/app.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+}
diff --git a/public/docs/_examples/style-guide/ts/11-09/app/index.ts b/public/docs/_examples/style-guide/ts/11-09/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-09/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-11/app/app.component.avoid.html
new file mode 100644
index 0000000000..f492b0543c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/app.component.avoid.html
@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<span class="green-background">Current status indicator</span>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/app.component.css b/public/docs/_examples/style-guide/ts/11-11/app/app.component.css
new file mode 100644
index 0000000000..a66a0598d6
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/app.component.css
@@ -0,0 +1,5 @@
+/*#docregion*/
+.green-background {
+  background-color: #00DD00;
+  color: black;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/app.component.html b/public/docs/_examples/style-guide/ts/11-11/app/app.component.html
new file mode 100644
index 0000000000..0956810314
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/app.component.html
@@ -0,0 +1,3 @@
+<!-- #docregion-->
+<span class="green-background">Current status is OK!</span>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-11/app/app.component.ts
new file mode 100644
index 0000000000..9a12130466
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/app.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+}
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/index.ts b/public/docs/_examples/style-guide/ts/11-11/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/app/app.routes.ts b/public/docs/_examples/style-guide/ts/app/app.routes.ts
index 644e86bffd..da4bf2a556 100644
--- a/public/docs/_examples/style-guide/ts/app/app.routes.ts
+++ b/public/docs/_examples/style-guide/ts/app/app.routes.ts
@@ -26,6 +26,15 @@ import { AppComponent as S0701 } from '../07-01/app';
 import { AppComponent as S0703 } from '../07-03/app';
 import { AppComponent as S0704 } from '../07-04/app';
 import { AppComponent as S0901 } from '../09-01/app';
+import { AppComponent as S1101 } from '../11-01/app';
+import { AppComponent as S1102 } from '../11-02/app';
+import { AppComponent as S1103 } from '../11-03/app';
+import { AppComponent as S1105 } from '../11-05/app';
+import { AppComponent as S1106 } from '../11-06/app';
+import { AppComponent as S1107 } from '../11-07/app';
+import { AppComponent as S1108 } from '../11-08/app';
+import { AppComponent as S1109 } from '../11-09/app';
+import { AppComponent as S1111 } from '../11-11/app';
 
 const routes: RouterConfig = [
   { path: '', redirectTo: '/01-01', pathMatch: 'full' },
@@ -55,6 +64,15 @@ const routes: RouterConfig = [
   { path: '07-03', component: S0703 },
   { path: '07-04', component: S0704 },
   { path: '09-01', component: S0901 },
+  { path: '11-01', component: S1101 },
+  { path: '11-02', component: S1102 },
+  { path: '11-03', component: S1103 },
+  { path: '11-05', component: S1105 },
+  { path: '11-06', component: S1106 },
+  { path: '11-07', component: S1107 },
+  { path: '11-08', component: S1108 },
+  { path: '11-09', component: S1109 },
+  { path: '11-11', component: S1111 },
 ];
 
 export const appRouterProviders = [
diff --git a/public/docs/_examples/style-guide/ts/systemjs.custom.js b/public/docs/_examples/style-guide/ts/systemjs.custom.js
index 10f13fe801..c829a24522 100644
--- a/public/docs/_examples/style-guide/ts/systemjs.custom.js
+++ b/public/docs/_examples/style-guide/ts/systemjs.custom.js
@@ -29,7 +29,16 @@
     '07-01', '07-01/app', '07-01/app/heroes', '07-01/app/heroes/shared',
     '07-03', '07-03/app', '07-03/app/heroes', '07-03/app/heroes/hero-list', '07-03/app/heroes/shared',
     '07-04', '07-04/app', '07-04/app/heroes', '07-04/app/heroes/shared',
-    '09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button'
+    '09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button',
+    '11-01', '11-01/app',
+    '11-02', '11-02/app',
+    '11-03', '11-03/app',
+    '11-05', '11-05/app',
+    '11-06', '11-06/app','11-06/app/heroes', '11-06/app/heroes/shared',
+    '11-07', '11-07/app',
+    '11-08', '11-08/app', '11-08/app/heroes', '11-08/app/heroes/shared',
+    '11-09', '11-09/app',
+    '11-11', '11-11/app'
   ];
 
   var packages = {};
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
index 0feeb5f8f8..8cecd0b6fa 100644
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@@ -56,6 +56,7 @@ a(id='toc')
     1. [Services](#services)
     1. [Data Services](#data-services)
     1. [Lifecycle Hooks](#lifecycle-hooks)
+    1. [Accessibility](#accessibility)
     1. [Appendix](#appendix)
 
 .l-main-section
@@ -1869,7 +1870,334 @@ a(href="#toc") Back to top
 
 +makeExample('style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')
 :marked
+  
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ## Accessibility
+
+  Make your applications accessible to all method of navigation, including keyboard-only navigation and assistive 
+  technologies.  
+
+  ### <a id="11-01"></a>Provide a page language code
+  #### <a href="#01-01">Style 11-01</a>
+.s-rule.do
+  :marked
+    **Do** provide a `lang` attribute on your `html` tag.
+
+.s-why
+  :marked
+    **Why?** Assistive technologies, such as screen readers, need to know the language of the page.
+    
+.s-why
+  :marked
+    **Why?** Language tools, such as spell checkers and translators adapt to the given language.
+
+.s-why.s-why-last
+  :marked
+    **Why?** This enables styling and font selection based on the page language.    
+
+:marked
++makeExample('style-guide/ts/11-01/app/index.avoid.html', 'page-lang', 'index.html')(avoid=1)
+
+:marked
+  Provide the ISO language code as well the country code (where appropriate).
+  
++makeExample('style-guide/ts/11-01/app/index.html', 'page-lang', 'index.html')  
+
+.l-main-section
+:marked
+  ### <a id="11-02"></a>Never remove the browser focus outline 
+  #### <a href="#11-02">Style 11-02</a>
+.s-rule.do
+  :marked
+    **Do** keep the `outline` css property intact.
+
+.s-rule.consider
+  :marked
+    **Consider** only removing it if absolutely required and an alternate `:focus` style is provided.
+
+.s-rule.avoid
+  :marked
+    **Avoid** completely removing the focus outline on your page.
+
+.s-why
+  :marked
+    **Why?** Sighted keyboard-only users fully rely on a visual indication of focus for navigation.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Removing it renders a page immediately inaccessible.
+
+:marked
+  Never add one of the following styles without providing an alternate `:focus` outline style.
+
++makeExample('style-guide/ts/11-02/app/app.component.avoid.css', '', 'app.component.css')(avoid=1)    
+
+:marked
+.l-main-section
+:marked
+  ### <a id="11-03"></a>If you can use a native HTML element, then do so.
+  #### <a href="#11-03">Style 11-03</a>
+.s-rule.do
+  :marked
+    **Do** use native HTML elements where possible.
+
+.s-rule.avoid
+  :marked
+    **Avoid** recreating elements such as `input`, `button` and `a` with `div` and `span`.
+
+.s-why
+  :marked
+    **Why?** Native HTML elements contain a lot of built in functionality, i.e. accepting keyboard focus and exposing the correct interaction events.
+
+.s-why
+  :marked
+    **Why?** Native HTML elements are instantly understood by all browsers and assistive technologies, such as screen readers.
+    
+.s-why.s-why-last
+  :marked
+    **Why?** Native HTML elements automatically follow expected interaction patterns.   
+
+:marked
++makeExample('style-guide/ts/11-03/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-03/app/app.component.html', '', 'app.component.html')
+
+.l-main-section
+:marked
+  ### <a id="11-04"></a>Always support and test keyboard navigation.
+  #### <a href="#11-04">Style 11-04</a>
+.s-rule.do
+  :marked
+    **Do** unplug your mouse and test if all functionality on your page can be reached and activated with `TAB`, 
+    `SHIFT+TAB`, `ENTER`, `SPACE` and `the arrow keys` alone.
+
+.s-rule.avoid
+  :marked
+    **Avoid** any functional areas that cannot be reached this way.
+
+.s-why
+  :marked
+    **Why?** People who cannot use a mouse due to disability or injury navigate with the keyboard alone or other 
+    related technologies.
+
+.s-why.s-why-last
+  :marked
+    **Why?** People with visual disabilities requiring the assistance of screen readers also exclusively navigate with 
+    the keyboard alone or other related technologies.
+    
+.l-main-section
+:marked
+  ### <a id="11-05"></a>Use `dl` to display the read-only state of interactive controls / form controls.
+  #### <a href="#11-05">Style 11-05</a>
+.s-rule.do
+  :marked
+    **Do** display read only key-value data as a `definition list`.
+
+.s-rule.avoid
+  :marked
+    **Avoid** using the `label` tag without a related interactive control / form control. 
+
+.s-rule.avoid
+  :marked
+    **Avoid** using only `div` and `span` to display related key-value data.    
+    
+.s-why
+  :marked
+    **Why?** Assistive technologies, such as screen readers, recognize the `dl` as containing related key-value pairs.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Unrelated `label` tags are considered invalid HTML and not recognized by assistive technologies.    
+
+:marked
++makeExample('style-guide/ts/11-05/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-05/app/app.component.html', '', 'app.component.html')    
+    
+.l-main-section
+:marked
+  ### <a id="11-06"></a>Provide a label for all interactive controls / form controls and groups of controls.
+  #### <a href="#11-06">Style 11-06</a>
+.s-rule.do
+  :marked
+    **Do** associate a `label` element with every interactive control / form control.
+    
+.s-rule.do
+  :marked
+    **Do** place groups of related interactive controls / form controls in a `fieldset` and label with `legend`.    
+
+.s-rule.avoid
+  :marked
+    **Avoid** unlabelled interactive controls / form controls. 
+
+.s-rule.avoid
+  :marked
+    **Avoid** any unassociated labels.    
+
+.s-why
+  :marked
+    **Why?** All users need to know the meaning of every interactive control / form control.
+
+.s-why
+  :marked
+    **Why?** Users with visual disabilities are unable to assume this meaning based on visual position.
+    
+.s-why.s-why-last
+  :marked
+    **Why?** Associated labels also become clickable making it easier to select interactive controls / form controls.    
+
+:marked
++makeExample('style-guide/ts/11-06/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-06/app/app.component.html', '', 'app.component.html')
+
+.l-main-section
+:marked
+  ### <a id="11-07"></a>Use links for navigation and buttons for activation.
+  #### <a href="#11-07">Style 11-07</a>
+.s-rule.do
+  :marked
+    **Do** use `a` tag links to navigate to other pages.
+
+.s-rule.do
+  :marked
+    **Do** use `buttons` to activate user actions requiring a response.    
+
+.s-rule.avoid
+  :marked
+    **Avoid** mixing these elements and functions. 
+
+.s-why
+  :marked
+    **Why?** Links are recognised by assistive technologies, expected to trigger a navigation and to be activated with `ENTER` alone.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Buttons are recognised by assistive technologies, expected to trigger a user action and to be activated with either `ENTER` or `SPACE`.
+
+:marked
++makeExample('style-guide/ts/11-07/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeTabs(
+`style-guide/ts/11-07/app/app.component.html,
+style-guide/ts/11-07/app/app.component.ts`, 
+'', 
+`app.component.html, 
+app.component.ts`)    
+    
+.l-main-section
+:marked
+  ### <a id="11-08"></a>Provide descriptive text for your HTML elements.
+  #### <a href="#11-08">Style 11-08</a>
+.s-rule.do
+  :marked
+    **Do** provide descriptive text for elements such as `buttons` describing the purpose of the element.
+
+.s-rule.avoid
+  :marked
+    **Avoid** possible repetitive text for your elements as repetition causes confusion.
+
+.s-why
+  :marked
+    **Why?** Due to functionality such as `*ngFor` it is possible to create multiple instances of one HTML partial. 
+    A button stating *Save Rubberman* is then clearer than *Save Hero*.    
+    
+.s-why.s-why-last
+  :marked
+    **Why?** This severly impacts users relying on screen readers where multiple occurances of elements with the same 
+    text can cause the page to become unusable as the visual context cannot be seen.
+
+:marked
++makeExample('style-guide/ts/11-08/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-08/app/app.component.html', '', 'app.component.html')    
+    
+.l-main-section
+:marked
+  ### <a id="11-09"></a>Provide alternative text for all your images.
+  #### <a href="#11-09">Style 11-09</a>
+.s-rule.do
+  :marked
+    **Do** provide descriptive text for all images using the `alt` attribute.
+
+.s-rule.avoid
+  :marked
+    **Avoid** any images not described by text.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Users with visual disabilites will be unable to discern the meaning of images without an alternative textual description.
+
+:marked
++makeExample('style-guide/ts/11-09/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-09/app/app.component.html', '', 'app.component.html')
+
+.l-main-section
+:marked
+  ### <a id="11-10"></a>Provide good textual color contrast
+  #### <a href="#11-10">Style 11-10</a>
+.s-rule.do
+  :marked
+    **Do** provide a color contrast ratio of at least `4.5:1` between the text color and the text background color for small text .
+
+.s-rule.do
+  :marked
+    **Do** provide a color contrast ratio of at least `3:1` between the text color and the text background color for large text.   
+    
+.s-rule.do
+  :marked
+    **Do** use one of many freely available color contrast test tools to achieve this.      
+
+.s-rule.avoid
+  :marked
+    **Avoid** providing textual contrast below these levels.
+
+.s-why
+  :marked
+    **Why?** Users with limited vision, who are not reliant on screen readers, may be unable to read text not conforming to these contrast ratios.
+
+.s-why.s-why-last
+  :marked
+    **Why?** These ratios provide an enhanced reading experience for all users in a larger range of ambient light conditions.  
 
+.l-main-section
+:marked
+  ### <a id="11-11"></a>Avoid full reliance on color alone to convey meaning.
+  #### <a href="#11-11">Style 11-11</a>
+.s-rule.do
+  :marked
+    **Do** provide readable text to convey all application-critical information.
+
+.s-rule.avoid
+  :marked
+    **Avoid** using only color to convey application-critical information, i.e. *"Click on the green button"*.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Users with visual disabilites will be unable to recognize this important application information and therefore be unable to use it.
+
+:marked
++makeExample('style-guide/ts/11-11/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeTabs(
+`style-guide/ts/11-11/app/app.component.html,
+style-guide/ts/11-11/app/app.component.css,
+style-guide/ts/11-11/app/app.component.ts`, 
+'', 
+`app.component.html, app.component.css, 
+app.component.ts`)    
+    
 a(href="#toc") Back to top
 
 .l-main-section