docs(pipes): updated pipe documentation

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

@@ -42,29 +42,27 @@ var _observableStrategy = new ObservableStrategy();
 var __unused: Promise<any>;  // avoid unused import when Promise union types are erased
 
 /**
+ * @ngModule CommonModule
+ * @whatItDoes Unwraps a value from an asynchronous primitive.
+ * @howToUse `observable_or_promise_expression | async`
+ * @description
  * The `async` pipe subscribes to an `Observable` or `Promise` and returns the latest value it has
- * emitted.
+ * emitted. When a new value is emitted, the `async` pipe marks the component to be checked for
- * When a new value is emitted, the `async` pipe marks the component to be checked for changes.
+ * changes. When the component gets destroyed, the `async` pipe unsubscribes automatically to avoid
- * When the component gets destroyed, the `async` pipe unsubscribes automatically to avoid
  * potential memory leaks.
  *
- * ## Usage
- *
- *     object | async
- *
- * where `object` is of type `Observable` or of type `Promise`.
  *
  * ## Examples
  *
  * This example binds a `Promise` to the view. Clicking the `Resolve` button resolves the
  * promise.
  *
- * {@example core/pipes/ts/async_pipe/async_pipe_example.ts region='AsyncPipePromise'}
+ * {@example common/pipes/ts/async_pipe.ts region='AsyncPipePromise'}
  *
  * It's also possible to use `async` with Observables. The example below binds the `time` Observable
- * to the view. Every 500ms, the `time` Observable updates the view with the current time.
+ * to the view. The Observable continuesly updates the view with the current time.
  *
- * {@example core/pipes/ts/async_pipe/async_pipe_example.ts region='AsyncPipeObservable'}
+ * {@example common/pipes/ts/async_pipe.ts region='AsyncPipeObservable'}
  *
  * @stable
  */

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

@@ -15,23 +15,25 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
 
 
 /**
- * Formats a date value to a string based on the requested format.
+ * @ngModule CommonModule
+ * @whatItDoes Formats a date according to locale rules.
+ * @howToUse `date_expression | date[:format]`
+ * @description
  *
- * WARNINGS:
+ * Where:
- * - this pipe is marked as pure hence it will not be re-evaluated when the input is mutated.
+ * - `expression` is a date object or a number (milliseconds since UTC epoch) or an ISO string
- *   Instead users should treat the date as an immutable object and change the reference when the
+ * (https://www.w3.org/TR/NOTE-datetime).
- *   pipe needs to re-run (this is to avoid reformatting the date on every change detection run
+ * - `format` indicates which date/time components to include. The format can be predifined as
- *   which would be an expensive operation).
+ *   shown below or custom as shown in the table.
- * - this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera
+ *   - `'medium'`: equivalent to `'yMMMdjms'` (e.g. `Sep 3, 2010, 12:05:08 PM` for `en-US`)
- *   browsers.
+ *   - `'short'`: equivalent to `'yMdjm'` (e.g. `9/3/2010, 12:05 PM` for `en-US`)
+ *   - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. `Friday, September 3, 2010` for `en-US`)
+ *   - `'longDate'`: equivalent to `'yMMMMd'` (e.g. `September 3, 2010` for `en-US`)
+ *   - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. `Sep 3, 2010` for `en-US`)
+ *   - `'shortDate'`: equivalent to `'yMd'` (e.g. `9/3/2010` for `en-US`)
+ *   - `'mediumTime'`: equivalent to `'jms'` (e.g. `12:05:08 PM` for `en-US`)
+ *   - `'shortTime'`: equivalent to `'jm'` (e.g. `12:05 PM` for `en-US`)
  *
- * ## Usage
- *
- *     expression | date[:format]
- *
- * where `expression` is a date object or a number (milliseconds since UTC epoch) or an ISO string
- * (https://www.w3.org/TR/NOTE-datetime) and `format` indicates which date/time components to
- * include:
  *
  *  | Component | Symbol | Short Form   | Long Form         | Numeric   | 2-digit   |
  *  |-----------|:------:|--------------|-------------------|-----------|-----------|
@@ -52,19 +54,16 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
  * In javascript, only the components specified will be respected (not the ordering,
  * punctuations, ...) and details of the formatting will be dependent on the locale.
  *
- * `format` can also be one of the following predefined formats:
- *
- *  - `'medium'`: equivalent to `'yMMMdjms'` (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
- *  - `'short'`: equivalent to `'yMdjm'` (e.g. 9/3/2010, 12:05 PM for en-US)
- *  - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. Friday, September 3, 2010 for en-US)
- *  - `'longDate'`: equivalent to `'yMMMMd'` (e.g. September 3, 2010 for en-US)
- *  - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. Sep 3, 2010 for en-US)
- *  - `'shortDate'`: equivalent to `'yMd'` (e.g. 9/3/2010 for en-US)
- *  - `'mediumTime'`: equivalent to `'jms'` (e.g. 12:05:08 PM for en-US)
- *  - `'shortTime'`: equivalent to `'jm'` (e.g. 12:05 PM for en-US)
- *
  * Timezone of the formatted text will be the local system timezone of the end-user's machine.
  *
+ * WARNINGS:
+ * - this pipe is marked as pure hence it will not be re-evaluated when the input is mutated.
+ *   Instead users should treat the date as an immutable object and change the reference when the
+ *   pipe needs to re-run (this is to avoid reformatting the date on every change detection run
+ *   which would be an expensive operation).
+ * - this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera
+ *   browsers.
+ *
  * ### Examples
  *
  * Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11)
@@ -77,7 +76,7 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
  *     {{ dateObj | date:'mmss' }}        // output is '43:11'
  * ```
  *
- * {@example core/pipes/ts/date_pipe/date_pipe_example.ts region='DatePipe'}
+ * {@example common/pipes/ts/date_pipe.ts region='DatePipe'}
  *
  * @stable
  */

modules/@angular/common/src/pipes/i18n_plural_pipe.ts

@@ -14,39 +14,19 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
 const _INTERPOLATION_REGEXP: RegExp = /#/g;
 
 /**
- *  Maps a value to a string that pluralizes the value properly.
+ * @ngModule CommonModule
+ * @whatItDoes Maps a value to a string that pluralizes the value according to locale rules.
+ * @howToUse `expression | i18nPlural:mapping`
+ * @description
  *
- *  ## Usage
+ *  Where:
- *
+ *  - `expression` is a number.
- *      expression | i18nPlural:mapping
+ *  - `mapping` is an object that mimics the ICU format, see
- *
+ *    http://userguide.icu-project.org/formatparse/messages
- *  where `expression` is a number and `mapping` is an object that mimics the ICU format,
- *  see http://userguide.icu-project.org/formatparse/messages
  *
  *  ## Example
  *
- *  ```
+ * {@example common/pipes/ts/i18n_pipe.ts region='I18nPluralPipeComponent'}
- *  @Component({
- *    selector: 'app',
- *    template: `
- *      <div>
- *        {{ messages.length | i18nPlural: messageMapping }}
- *      </div>
- *    `,
- *    // best practice is to define the locale at the application level
- *    providers: [{provide: LOCALE_ID, useValue: 'en_US'}]
- *  })
- *
- *  class MyApp {
- *    messages: any[];
- *    messageMapping: {[k:string]: string} = {
- *      '=0': 'No messages.',
- *      '=1': 'One message.',
- *      'other': '# messages.'
- *    }
- *    ...
- *  }
- *  ```
  *
  * @experimental
  */

modules/@angular/common/src/pipes/i18n_select_pipe.ts

@@ -11,33 +11,18 @@ import {isBlank, isStringMap} from '../facade/lang';
 import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
 
 /**
+ * @ngModule CommonModule
+ * @whatItDoes Generic selector that displays the string that matches the current value.
+ * @howToUse `expression | i18nSelect:mapping`
+ * @description
  *
- *  Generic selector that displays the string that matches the current value.
+ *  Where:
- *
+ *  - `mapping`: is an object that indicates the text that should be displayed
- *  ## Usage
- *
- *  expression | i18nSelect:mapping
- *
- *  where `mapping` is an object that indicates the text that should be displayed
  *  for different values of the provided `expression`.
  *
  *  ## Example
  *
- *  ```
+ * {@example common/pipes/ts/i18n_pipe.ts region='I18nSelectPipeComponent'}
- *  <div>
- *    {{ gender | i18nSelect: inviteMap }}
- *  </div>
- *
- *  class MyApp {
- *    gender: string = 'male';
- *    inviteMap: any = {
- *      'male': 'Invite him.',
- *      'female': 'Invite her.',
- *      'other': 'Invite them.'
- *    }
- *    ...
- *  }
- *  ```
  *
  *  @experimental
  */

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

@@ -13,10 +13,15 @@ import {Json} from '../facade/lang';
 
 
 /**
- * Transforms any input value using `JSON.stringify`. Useful for debugging.
+ * @ngModule CommonModule
+ * @whatItDoes Converts value into JSON string.
+ * @howToUse `expression | json`
+ * @description
+ *
+ * Converts value into string using `JSON.stringify`. Useful for debugging.
  *
  * ### Example
- * {@example core/pipes/ts/json_pipe/json_pipe_example.ts region='JsonPipe'}
+ * {@example common/pipes/ts/json_pipe.ts region='JsonPipe'}
  *
  * @stable
  */

modules/@angular/common/src/pipes/lowercase_pipe.ts

@@ -12,11 +12,16 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
 
 
 /**
- * Transforms text to lowercase.
+ * @ngModule CommonModule
+ * @whatItDoes Transforms string to lowercase.
+ * @howToUse `expression | lowercase`
+ * @description
+ *
+ * Converts value into lowercase string using `String.prototype.toLowerCase()`.
  *
  * ### Example
  *
- * {@example core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts region='LowerUpperPipe'}
+ * {@example common/pipes/ts/lowerupper_pipe.ts region='LowerUpperPipe'}
  *
  * @stable
  */

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

@@ -59,31 +59,29 @@ function formatNumber(
 }
 
 /**
- * WARNING: this pipe uses the Internationalization API.
+ * @ngModule CommonModule
- * Therefore it is only reliable in Chrome and Opera browsers. For other browsers please use a
+ * @whatItDoes Formats a number according to locale rules.
- * polyfill, for example: [https://github.com/andyearnshaw/Intl.js/].
+ * @howToUse `number_expression | number[:digitInfo]`
  *
- * Formats a number as local text. i.e. group sizing and separator and other locale-specific
+ * Formats a number as text. Group sizing and separator and other locale-specific
  * configurations are based on the active locale.
  *
- * ### Usage
+ * where `expression` is a number:
- *
+ *  - `digitInfo` is a `string` which has a following format: <br>
- *     expression | number[:digitInfo]
+ *     <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>
- *
+ *   - `minIntegerDigits` is the minimum number of integer digits to use. Defaults to `1`.
- * where `expression` is a number and `digitInfo` has the following format:
+ *   - `minFractionDigits` is the minimum number of digits after fraction. Defaults to `0`.
- *
+ *   - `maxFractionDigits` is the maximum number of digits after fraction. Defaults to `3`.
- *     {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
- *
- * - minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.
- * - minFractionDigits is the minimum number of digits after fraction. Defaults to 0.
- * - maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.
  *
  * For more information on the acceptable range for each of these numbers and other
  * details see your native internationalization library.
  *
+ * WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
+ * and may require a polyfill. See {@linkDocs guide/browser-support} for details.
+ *
  * ### Example
  *
- * {@example core/pipes/ts/number_pipe/number_pipe_example.ts region='NumberPipe'}
+ * {@example common/pipes/ts/number_pipe.ts region='NumberPipe'}
  *
  * @stable
  */
@@ -97,21 +95,22 @@ export class DecimalPipe implements PipeTransform {
 }
 
 /**
- * WARNING: this pipe uses the Internationalization API.
+ * @ngModule CommonModule
- * Therefore it is only reliable in Chrome and Opera browsers. For other browsers please use a
+ * @whatItDoes Formats a number as a percentage according to locale rules.
- * polyfill, for example: [https://github.com/andyearnshaw/Intl.js/].
+ * @howToUse `number_expression | percent[:digitInfo]`
  *
- * Formats a number as local percent.
+ * @description
  *
- * ### Usage
+ * Formats a number as percentage.
  *
- *     expression | percent[:digitInfo]
+ * - `digitInfo` See {@link DecimalPipe} for detailed description.
  *
- * For more information about `digitInfo` see {@link DecimalPipe}
+ * WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
+ * and may require a polyfill. See {@linkDocs guide/browser-support} for details.
  *
  * ### Example
  *
- * {@example core/pipes/ts/number_pipe/number_pipe_example.ts region='PercentPipe'}
+ * {@example common/pipes/ts/number_pipe.ts region='PercentPipe'}
  *
  * @stable
  */
@@ -125,26 +124,26 @@ export class PercentPipe implements PipeTransform {
 }
 
 /**
- * WARNING: this pipe uses the Internationalization API.
+ * @ngModule CommonModule
- * Therefore it is only reliable in Chrome and Opera browsers. For other browsers please use a
+ * @whatItDoes Formats a number as currency using locale rules.
- * polyfill, for example: [https://github.com/andyearnshaw/Intl.js/].
+ * @howToUse `number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]`
+ * @description
  *
+ * Use `currency` to format a number as currency.
  *
- * Formats a number as local currency.
+ * - `currencyCode` is the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code, such
+ *    as `USD` for the US dollar and `EUR` for the euro.
+ * - `symbolDisplay` is a boolean indicating whether to use the currency symbol or code.
+ *   - `true`: use symbol (e.g. `$`).
+ *   - `false`(default): use code (e.g. `USD`).
+ * - `digitInfo` See {@link DecimalPipe} for detailed description.
  *
- * ### Usage
+ * WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
- *
+ * and may require a polyfill. See {@linkDocs guide/browser-support} for details.
- *     expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
- *
- * where `currencyCode` is the ISO 4217 currency code, such as "USD" for the US dollar and
- * "EUR" for the euro. `symbolDisplay` is a boolean indicating whether to use the currency
- * symbol (e.g. $) or the currency code (e.g. USD) in the output. The default for this value
- * is `false`.
- * For more information about `digitInfo` see {@link DecimalPipe}.
  *
  * ### Example
  *
- * {@example core/pipes/ts/number_pipe/number_pipe_example.ts region='CurrencyPipe'}
+ * {@example common/pipes/ts/number_pipe.ts region='CurrencyPipe'}
  *
  * @stable
  */

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

@@ -12,48 +12,37 @@ import {StringWrapper, isArray, isBlank, isString} from '../facade/lang';
 import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
 
 /**
- * Creates a new List or String containing only a subset (slice) of the
+ * @ngModule CommonModule
- * elements.
+ * @whatItDoes Creates a new List or String containing a subset (slice) of the elements.
+ * @howToUse `array_or_string_expression | slice:start[:end]`
+ * @description
  *
- * The starting index of the subset to return is specified by the `start` parameter.
+ * Where the input expression is a `List` or `String`, and:
+ * - `start`: The starting index of the subset to return.
+ *   - **a positive integer**: return the item at `start` index and all items after
+ *     in the list or string expression.
+ *   - **a negative integer**: return the item at `start` index from the end and all items after
+ *     in the list or string expression.
+ *   - **if positive and greater than the size of the expression**: return an empty list or string.
+ *   - **if negative and greater than the size of the expression**: return entire list or string.
+ * - `end`: The ending index of the subset to return.
+ *   - **omitted**: return all items until the end.
+ *   - **if positive**: return all items before `end` index of the list or string.
+ *   - **if negative**: return all items before `end` index from the end of the list or string.
  *
- * The ending index of the subset to return is specified by the optional `end` parameter.
+ * All behavior is based on the expected behavior of the JavaScript API `Array.prototype.slice()`
- *
+ * and `String.prototype.slice()`.
- * ### Usage
- *
- *     expression | slice:start[:end]
- *
- * All behavior is based on the expected behavior of the JavaScript API
- * Array.prototype.slice() and String.prototype.slice()
- *
- * Where the input expression is a [List] or [String], and `start` is:
- *
- * - **a positive integer**: return the item at _start_ index and all items after
- * in the list or string expression.
- * - **a negative integer**: return the item at _start_ index from the end and all items after
- * in the list or string expression.
- * - **`|start|` greater than the size of the expression**: return an empty list or string.
- * - **`|start|` negative greater than the size of the expression**: return entire list or
- * string expression.
- *
- * and where `end` is:
- *
- * - **omitted**: return all items until the end of the input
- * - **a positive integer**: return all items before _end_ index of the list or string
- * expression.
- * - **a negative integer**: return all items before _end_ index from the end of the list
- * or string expression.
  *
  * When operating on a [List], the returned list is always a copy even when all
  * the elements are being returned.
  *
- * When operating on a blank value, returns it.
+ * When operating on a blank value, the pipe returns the blank value.
  *
  * ## List Example
  *
  * This `ngFor` example:
  *
- * {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_list'}
+ * {@example common/pipes/ts/slice_pipe.ts region='SlicePipe_list'}
  *
  * produces the following:
  *
@@ -62,7 +51,7 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
  *
  * ## String Examples
  *
- * {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_string'}
+ * {@example common/pipes/ts/slice_pipe.ts region='SlicePipe_string'}
  *
  * @stable
  */

modules/@angular/common/src/pipes/uppercase_pipe.ts

@@ -11,11 +11,16 @@ import {isBlank, isString} from '../facade/lang';
 import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
 
 /**
- * Implements uppercase transforms to text.
+ * @ngModule CommonModule
+ * @whatItDoes Transforms string to uppercase.
+ * @howToUse `expression | uppercase`
+ * @description
+ *
+ * Converts value into lowercase string using `String.prototype.toUpperCase()`.
  *
  * ### Example
  *
- * {@example core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts region='LowerUpperPipe'}
+ * {@example common/pipes/ts/lowerupper_pipe.ts region='LowerUpperPipe'}
  *
  * @stable
  */

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>'})
+@Component({
-export class AsyncObservableComponent {
+  selector: 'async-observable-pipe',
-  time = new Observable<number>((observer: Subscriber<number>) => {
+  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
-    setInterval(() => observer.next(new Date().getTime()), 500);
+})
+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 lowercase: <pre>'{{value | lowercase}}'</pre>
-    <p>In uppercase: <pre>'{{value | uppercase}}'</pre></p>
+    <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 {
+export class NumberPipeComponent {
-  pi: number = 3.141;
+  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',
+  selector: 'slice-list-pipe',
-  template: `<div>
+  template: `<ul>
-    <li *ngFor="let  i of collection | slice:1:3">{{i}}</li>
+    <li *ngFor="let i of collection | slice:1:3">{{i}}</li>
-  </div>`
+  </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);
-}

modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts

@@ -18,7 +18,7 @@ describe('animation example', () => {
   afterEach(verifyNoBrowserErrors);
 
   describe('index view', () => {
-    var URL = '/core/animation/ts/dsl/index.html';
+    var URL = '/core/animation/ts/dsl/';
 
     it('should list out the current collection of items', () => {
       browser.get(URL);

modules/@angular/examples/tsconfig-build.json

@@ -25,8 +25,8 @@
     "./**/module.ts",
     "./**/test/*.ts",
     "./**/e2e_test/*.ts",
-    "../../../node_modules/zone.js/dist/zone.js.d.ts",
     "../../system.d.ts",
+    "../../../node_modules/zone.js/dist/zone.js.d.ts",
     // TODO(i): we can't use protractor's built-in typings because they contain lots of ambient definitions
     "../../../node_modules/@types/protractor/index.d.ts"
   ]