docs(pipes): updated pipe documentation

modules/@angular/examples/common/pipes/ts/async_pipe.ts

@@ -14,13 +14,14 @@ import {Subscriber} from 'rxjs/Subscriber';
 
 // #docregion AsyncPipePromise
 @Component({
-  selector: 'async-promise',
+  selector: 'async-promise-pipe',
   template: `<div>
-    <p>Wait for it... {{ greeting | async }}</p>
+    <code>promise|async</code>: 
     <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
+    <span>Wait for it... {{ greeting | async }}</span>
   </div>`
 })
-export class AsyncPromiseComponent {
+export class AsyncPromisePipeComponent {
   greeting: Promise<string> = null;
   arrived: boolean = false;
 
@@ -45,10 +46,26 @@ export class AsyncPromiseComponent {
 // #enddocregion
 
 // #docregion AsyncPipeObservable
-@Component({selector: 'async-observable', template: '<div>Time: {{ time | async }}</div>'})
-export class AsyncObservableComponent {
-  time = new Observable<number>((observer: Subscriber<number>) => {
-    setInterval(() => observer.next(new Date().getTime()), 500);
+@Component({
+  selector: 'async-observable-pipe',
+  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
+})
+export class AsyncObservablePipeComponent {
+  time = new Observable<string>((observer: Subscriber<string>) => {
+    setInterval(() => observer.next(new Date().toString()), 1000);
   });
 }
 // #enddocregion
+
+// For some reason protractor hangs on setInterval. So we will run outside of angular zone so that
+// protractor will not see us. Also we want to have this outside the docregion so as not to confuse
+// the reader.
+function setInterval(fn: Function, delay: number) {
+  var zone = Zone.current;
+  var rootZone = zone;
+  while (rootZone.parent) {
+    rootZone = rootZone.parent;
+  }
+  rootZone.run(
+      () => { window.setInterval(function() { zone.run(fn, this, arguments as any); }, delay); });
+}

modules/@angular/examples/common/pipes/ts/date_pipe.ts

@@ -12,32 +12,14 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion DatePipe
 @Component({
-  selector: 'date-example',
+  selector: 'date-pipe',
   template: `<div>
     <p>Today is {{today | date}}</p>
     <p>Or if you prefer, {{today | date:'fullDate'}}</p>
     <p>The time is {{today | date:'jmZ'}}</p>
   </div>`
 })
-export class DatePipeExample {
+export class DatePipeComponent {
   today: number = Date.now();
 }
 // #enddocregion
-
-@Component({
-  selector: 'example-app',
-  template: `
-    <h1>DatePipe Example</h1>
-    <date-example></date-example>
-  `
-})
-export class AppCmp {
-}
-
-@NgModule({declarations: [DatePipeExample, AppCmp], imports: [BrowserModule], bootstrap: [AppCmp]})
-class AppModule {
-}
-
-export function main() {
-  platformBrowserDynamic().bootstrapModule(AppModule);
-}

modules/@angular/examples/common/pipes/ts/e2e_test/pipe_spec.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  var EC = (<any>protractor).ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('pipe', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  describe('async', () => {
+    var URL = '/common/pipes/ts/';
+
+    it('should resolve and display promise', () => {
+      browser.get(URL);
+      waitForElement('async-promise-pipe');
+      expect(element.all(by.css('async-promise-pipe span')).get(0).getText())
+          .toEqual('Wait for it...');
+      element(by.css('async-promise-pipe button')).click();
+      expect(element.all(by.css('async-promise-pipe span')).get(0).getText())
+          .toEqual('Wait for it... hi there!');
+    });
+
+    it('should update lowercase/uppercase', () => {
+      browser.get(URL);
+      waitForElement('lowerupper-pipe');
+      element(by.css('lowerupper-pipe input')).sendKeys('Hello World!');
+      expect(element.all(by.css('lowerupper-pipe pre')).get(0).getText())
+          .toEqual('\'hello world!\'');
+      expect(element.all(by.css('lowerupper-pipe pre')).get(1).getText())
+          .toEqual('\'HELLO WORLD!\'');
+    });
+  });
+});

modules/@angular/examples/common/pipes/ts/i18n_pipe.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {Observable} from 'rxjs/Observable';
+import {Subscriber} from 'rxjs/Subscriber';
+
+// #docregion I18nPluralPipeComponent
+@Component({
+  selector: 'i18n-plural-pipe',
+  template: `<div>{{ messages.length | i18nPlural: messageMapping }}</div>`
+})
+export class I18nPluralPipeComponent {
+  messages: any[] = ['Message 1'];
+  messageMapping:
+      {[k: string]: string} = {'=0': 'No messages.', '=1': 'One message.', 'other': '# messages.'};
+}
+// #enddocregion
+
+// #docregion I18nSelectPipeComponent
+@Component(
+    {selector: 'i18n-select-pipe', template: `<div>{{gender | i18nSelect: inviteMap}} </div>`})
+export class I18nSelectPipeComponent {
+  gender: string = 'male';
+  inviteMap: any = {'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'};
+}
+//#enddocregion

modules/@angular/examples/common/pipes/ts/json_pipe.ts

@@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion JsonPipe
 @Component({
-  selector: 'json-example',
+  selector: 'json-pipe',
   template: `<div>
     <p>Without JSON pipe:</p>
     <pre>{{object}}</pre>
@@ -20,25 +20,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
     <pre>{{object | json}}</pre>
   </div>`
 })
-export class JsonPipeExample {
+export class JsonPipeComponent {
   object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
 }
 // #enddocregion
-
-@Component({
-  selector: 'example-app',
-  template: `
-    <h1>JsonPipe Example</h1>
-    <json-example></json-example>
-  `
-})
-export class AppCmp {
-}
-
-@NgModule({imports: [BrowserModule], bootstrap: [AppCmp], declarations: [AppCmp, JsonPipeExample]})
-class AppModule {
-}
-
-export function main() {
-  platformBrowserDynamic().bootstrapModule(AppModule);
-}

modules/@angular/examples/common/pipes/ts/lowerupper_pipe.ts

@@ -12,33 +12,15 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion LowerUpperPipe
 @Component({
-  selector: 'lowerupper-example',
+  selector: 'lowerupper-pipe',
   template: `<div>
     <label>Name: </label><input #name (keyup)="change(name.value)" type="text">
-    <p>In lowercase: <pre>'{{value | lowercase}}'</pre></p>
-    <p>In uppercase: <pre>'{{value | uppercase}}'</pre></p>
+    <p>In lowercase: <pre>'{{value | lowercase}}'</pre>
+    <p>In uppercase: <pre>'{{value | uppercase}}'</pre>
   </div>`
 })
-export class LowerUpperPipeExample {
+export class LowerUpperPipeComponent {
   value: string;
   change(value: string) { this.value = value; }
 }
 // #enddocregion
-
-@Component({
-  selector: 'example-app',
-  template: `
-    <h1>LowercasePipe &amp; UppercasePipe Example</h1>
-    <lowerupper-example></lowerupper-example>
-  `
-})
-export class AppCmp {
-}
-
-@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
-class AppModule {
-}
-
-export function main() {
-  platformBrowserDynamic().bootstrapModule(AppModule);
-}

modules/@angular/examples/common/pipes/ts/module.ts

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {AsyncObservablePipeComponent, AsyncPromisePipeComponent} from './async_pipe';
+import {DatePipeComponent} from './date_pipe';
+import {I18nPluralPipeComponent, I18nSelectPipeComponent} from './i18n_pipe';
+import {JsonPipeComponent} from './json_pipe';
+import {LowerUpperPipeComponent} from './lowerupper_pipe';
+import {CurrencyPipeComponent, NumberPipeComponent, PercentPipeComponent} from './number_pipe';
+import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <h1>Pipe Example</h1>
+
+    <h2><code>async</code></h2>
+    <async-promise-pipe></async-promise-pipe>
+    <async-observable-pipe></async-observable-pipe>
+
+    <h2><code>date</code></h2>
+    <date-pipe></date-pipe>
+    
+    <h2><code>json</code></h2>
+    <json-pipe></json-pipe>
+
+    <h2><code>lower</code>, <code>upper</code></h2>
+    <lowerupper-pipe></lowerupper-pipe>
+
+    <h2><code>number</code></h2>
+    <number-pipe></number-pipe>
+    <percent-pipe></percent-pipe>
+    <currency-pipe></currency-pipe>
+
+    <h2><code>slice</code></h2>
+    <slice-string-pipe></slice-string-pipe>
+    <slice-list-pipe></slice-list-pipe>
+
+    <h2><code>i18n</code></h2>
+    <i18n-plural-pipe></i18n-plural-pipe>
+    <i18n-select-pipe></i18n-select-pipe>
+  `
+})
+export class ExampleAppComponent {
+}
+
+@NgModule({
+  declarations: [
+    AsyncPromisePipeComponent, AsyncObservablePipeComponent, ExampleAppComponent, JsonPipeComponent,
+    DatePipeComponent, LowerUpperPipeComponent, NumberPipeComponent, PercentPipeComponent,
+    CurrencyPipeComponent, SlicePipeStringComponent, SlicePipeListComponent,
+    I18nPluralPipeComponent, I18nSelectPipeComponent
+  ],
+  imports: [BrowserModule],
+  bootstrap: [ExampleAppComponent]
+})
+export class AppModule {
+}

modules/@angular/examples/common/pipes/ts/number_pipe.ts

@@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion NumberPipe
 @Component({
-  selector: 'number-example',
+  selector: 'number-pipe',
   template: `<div>
     <p>e (no formatting): {{e}}</p>
     <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
@@ -20,21 +20,21 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
     <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
   </div>`
 })
-export class NumberPipeExample {
-  pi: number = 3.141;
+export class NumberPipeComponent {
+  pi: number = 3.141592;
   e: number = 2.718281828459045;
 }
 // #enddocregion
 
 // #docregion PercentPipe
 @Component({
-  selector: 'percent-example',
+  selector: 'percent-pipe',
   template: `<div>
     <p>A: {{a | percent}}</p>
     <p>B: {{b | percent:'4.3-5'}}</p>
   </div>`
 })
-export class PercentPipeExample {
+export class PercentPipeComponent {
   a: number = 0.259;
   b: number = 1.3495;
 }
@@ -42,37 +42,14 @@ export class PercentPipeExample {
 
 // #docregion CurrencyPipe
 @Component({
-  selector: 'currency-example',
+  selector: 'currency-pipe',
   template: `<div>
     <p>A: {{a | currency:'USD':false}}</p>
     <p>B: {{b | currency:'USD':true:'4.2-2'}}</p>
   </div>`
 })
-export class CurrencyPipeExample {
+export class CurrencyPipeComponent {
   a: number = 0.259;
   b: number = 1.3495;
 }
 // #enddocregion
-
-@Component({
-  selector: 'example-app',
-  template: `
-    <h1>Numeric Pipe Examples</h1>
-    <h2>NumberPipe Example</h2>
-    <number-example></number-example>
-    <h2>PercentPipe Example</h2>
-    <percent-example></percent-example>
-    <h2>CurrencyPipeExample</h2>
-    <currency-example></currency-example>
-  `
-})
-export class AppCmp {
-}
-
-@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
-class AppModule {
-}
-
-export function main() {
-  platformBrowserDynamic().bootstrapModule(AppModule);
-}

modules/@angular/examples/common/pipes/ts/slice_pipe.ts

@@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion SlicePipe_string
 @Component({
-  selector: 'slice-string-example',
+  selector: 'slice-string-pipe',
   template: `<div>
     <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
     <p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>
@@ -22,38 +22,19 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
     <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
   </div>`
 })
-export class SlicePipeStringExample {
+export class SlicePipeStringComponent {
   str: string = 'abcdefghij';
 }
 // #enddocregion
 
 // #docregion SlicePipe_list
 @Component({
-  selector: 'slice-list-example',
-  template: `<div>
-    <li *ngFor="let  i of collection | slice:1:3">{{i}}</li>
-  </div>`
+  selector: 'slice-list-pipe',
+  template: `<ul>
+    <li *ngFor="let i of collection | slice:1:3">{{i}}</li>
+  </ul>`
 })
-export class SlicePipeListExample {
+export class SlicePipeListComponent {
   collection: string[] = ['a', 'b', 'c', 'd'];
 }
 // #enddocregion
-
-@Component({
-  selector: 'example-app',
-  template: `
-    <h1>SlicePipe Examples</h1>
-    <slice-list-example></slice-list-example>
-    <slice-string-example></slice-string-example>
-  `
-})
-export class AppCmp {
-}
-
-@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
-class AppModule {
-}
-
-export function main() {
-  platformBrowserDynamic().bootstrapModule(AppModule);
-}