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