refactor: move angular source to /packages rather than modules/@angular

packages/examples/common/location/ts/e2e_test/location_component_spec.ts

@@ -0,0 +1,30 @@
+/**
+ * @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 {browser, by, element, protractor} from 'protractor';
+
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+
+function waitForElement(selector: string) {
+  const EC = (<any>protractor).ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('Location', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  it('should verify paths', () => {
+    browser.get('/common/location/ts/#/bar/baz');
+    waitForElement('hash-location');
+    expect(element.all(by.css('path-location code')).get(0).getText())
+        .toEqual('/common/location/ts');
+    expect(element.all(by.css('hash-location code')).get(0).getText()).toEqual('/bar/baz');
+  });
+});

packages/examples/common/location/ts/hash_location_component.ts

@@ -0,0 +1,26 @@
+/**
+ * @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
+ */
+
+// #docregion LocationComponent
+import {HashLocationStrategy, Location, LocationStrategy} from '@angular/common';
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'hash-location',
+  providers: [Location, {provide: LocationStrategy, useClass: HashLocationStrategy}],
+  template: `
+    <h1>HashLocationStrategy</h1>
+    Current URL is: <code>{{location.path()}}</code><br>
+    Normalize: <code>/foo/bar/</code> is: <code>{{location.normalize('foo/bar')}}</code><br>
+  `
+})
+export class HashLocationComponent {
+  location: Location;
+  constructor(location: Location) { this.location = location; }
+}
+// #enddocregion

packages/examples/common/location/ts/module.ts

@@ -0,0 +1,30 @@
+/**
+ * @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 {APP_BASE_HREF} from '@angular/common';
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {HashLocationComponent} from './hash_location_component';
+import {PathLocationComponent} from './path_location_component';
+
+@Component({
+  selector: 'example-app',
+  template: `<hash-location></hash-location><path-location></path-location>`
+})
+export class ExampleAppComponent {
+}
+
+@NgModule({
+  declarations: [ExampleAppComponent, PathLocationComponent, HashLocationComponent],
+  providers: [{provide: APP_BASE_HREF, useValue: '/'}],
+  imports: [BrowserModule],
+  bootstrap: [ExampleAppComponent]
+})
+export class AppModule {
+}

packages/examples/common/location/ts/path_location_component.ts

@@ -0,0 +1,26 @@
+/**
+ * @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
+ */
+
+// #docregion LocationComponent
+import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'path-location',
+  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
+  template: `
+    <h1>PathLocationStrategy</h1>
+    Current URL is: <code>{{location.path()}}</code><br>
+    Normalize: <code>/foo/bar/</code> is: <code>{{location.normalize('foo/bar')}}</code><br>
+  `
+})
+export class PathLocationComponent {
+  location: Location;
+  constructor(location: Location) { this.location = location; }
+}
+// #enddocregion

packages/examples/common/ngComponentOutlet/ts/e2e_test/ngComponentOutlet_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 {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('ngComponentOutlet', () => {
+  const URL = 'common/ngComponentOutlet/ts/';
+  afterEach(verifyNoBrowserErrors);
+
+  describe('ng-component-outlet-example', () => {
+    it('should render simple', () => {
+      browser.get(URL);
+      waitForElement('ng-component-outlet-simple-example');
+      expect(element.all(by.css('hello-world')).getText()).toEqual(['Hello World!']);
+    });
+
+    it('should render complete', () => {
+      browser.get(URL);
+      waitForElement('ng-component-outlet-complete-example');
+      expect(element.all(by.css('complete-component')).getText()).toEqual(['Complete: Ahoj Svet!']);
+    });
+
+    it('should render other module', () => {
+      browser.get(URL);
+      waitForElement('ng-component-outlet-other-module-example');
+      expect(element.all(by.css('other-module-component')).getText()).toEqual([
+        'Other Module Component!'
+      ]);
+    });
+  });
+});

packages/examples/common/ngComponentOutlet/ts/module.ts

@@ -0,0 +1,114 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {Compiler, Component, Injectable, Injector, NgModule, NgModuleFactory, ReflectiveInjector} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+
+
+// #docregion SimpleExample
+@Component({selector: 'hello-world', template: 'Hello World!'})
+class HelloWorld {
+}
+
+@Component({
+  selector: 'ng-component-outlet-simple-example',
+  template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`
+})
+class NgTemplateOutletSimpleExample {
+  // This field is necessary to expose HelloWorld to the template.
+  HelloWorld = HelloWorld;
+}
+// #enddocregion
+
+// #docregion CompleteExample
+@Injectable()
+class Greeter {
+  suffix = '!';
+}
+
+@Component({
+  selector: 'complete-component',
+  template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
+})
+class CompleteComponent {
+  constructor(public greeter: Greeter) {}
+}
+
+@Component({
+  selector: 'ng-component-outlet-complete-example',
+  template: `
+    <ng-container *ngComponentOutlet="CompleteComponent; 
+                                      injector: myInjector; 
+                                      content: myContent"></ng-container>`
+})
+class NgTemplateOutletCompleteExample {
+  // This field is necessary to expose CompleteComponent to the template.
+  CompleteComponent = CompleteComponent;
+  myInjector: Injector;
+
+  myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]];
+
+  constructor(injector: Injector) {
+    this.myInjector = ReflectiveInjector.resolveAndCreate([Greeter], injector);
+  }
+}
+// #enddocregion
+
+// #docregion NgModuleFactoryExample
+@Component({selector: 'other-module-component', template: `Other Module Component!`})
+class OtherModuleComponent {
+}
+
+@Component({
+  selector: 'ng-component-outlet-other-module-example',
+  template: `
+    <ng-container *ngComponentOutlet="OtherModuleComponent;
+                                      ngModuleFactory: myModule;"></ng-container>`
+})
+class NgTemplateOutletOtherModuleExample {
+  // This field is necessary to expose OtherModuleComponent to the template.
+  OtherModuleComponent = OtherModuleComponent;
+  myModule: NgModuleFactory<any>;
+
+  constructor(compiler: Compiler) { this.myModule = compiler.compileModuleSync(OtherModule); }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `<ng-component-outlet-simple-example></ng-component-outlet-simple-example>
+             <hr/>
+             <ng-component-outlet-complete-example></ng-component-outlet-complete-example>
+             <hr/>
+             <ng-component-outlet-other-module-example></ng-component-outlet-other-module-example>`
+})
+class ExampleApp {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [
+    ExampleApp, NgTemplateOutletSimpleExample, NgTemplateOutletCompleteExample,
+    NgTemplateOutletOtherModuleExample, HelloWorld, CompleteComponent
+  ],
+  entryComponents: [HelloWorld, CompleteComponent],
+  bootstrap: [ExampleApp]
+})
+export class AppModule {
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [OtherModuleComponent],
+  entryComponents: [OtherModuleComponent]
+})
+export class OtherModule {
+}

packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts

@@ -0,0 +1,72 @@
+/**
+ * @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 {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('ngIf', () => {
+  const URL = 'common/ngIf/ts/';
+  afterEach(verifyNoBrowserErrors);
+
+  describe('ng-if-simple', () => {
+    let comp = 'ng-if-simple';
+    it('should hide/show content', () => {
+      browser.get(URL);
+      waitForElement(comp);
+      expect(element.all(by.css(comp)).get(0).getText()).toEqual('hide show = true\nText to show');
+      element(by.css(comp + ' button')).click();
+      expect(element.all(by.css(comp)).get(0).getText()).toEqual('show show = false');
+    });
+  });
+
+  describe('ng-if-else', () => {
+    let comp = 'ng-if-else';
+    it('should hide/show content', () => {
+      browser.get(URL);
+      waitForElement(comp);
+      expect(element.all(by.css(comp)).get(0).getText()).toEqual('hide show = true\nText to show');
+      element(by.css(comp + ' button')).click();
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('show show = false\nAlternate text while primary text is hidden');
+    });
+  });
+
+  describe('ng-if-then-else', () => {
+    let comp = 'ng-if-then-else';
+    it('should hide/show content', () => {
+      browser.get(URL);
+      waitForElement(comp);
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('hide Switch Primary show = true\nPrimary text to show');
+      element.all(by.css(comp + ' button')).get(1).click();
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('hide Switch Primary show = true\nSecondary text to show');
+      element.all(by.css(comp + ' button')).get(0).click();
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('show Switch Primary show = false\nAlternate text while primary text is hidden');
+    });
+  });
+
+  describe('ng-if-let', () => {
+    let comp = 'ng-if-let';
+    it('should hide/show content', () => {
+      browser.get(URL);
+      waitForElement(comp);
+      expect(element.all(by.css(comp)).get(0).getText())
+          .toEqual('Next User\nWaiting... (user is null)');
+      element(by.css(comp + ' button')).click();
+      expect(element.all(by.css(comp)).get(0).getText()).toEqual('Next User\nHello Smith, John!');
+    });
+  });
+});

packages/examples/common/ngIf/ts/module.ts

@@ -0,0 +1,128 @@
+/**
+ * @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, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {Subject} from 'rxjs/Subject';
+
+
+// #docregion NgIfSimple
+@Component({
+  selector: 'ng-if-simple',
+  template: `
+    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
+    show = {{show}}
+    <br>
+    <div *ngIf="show">Text to show</div>
+`
+})
+class NgIfSimple {
+  show: boolean = true;
+}
+// #enddocregion
+
+// #docregion NgIfElse
+@Component({
+  selector: 'ng-if-else',
+  template: `
+    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
+    show = {{show}}
+    <br>
+    <div *ngIf="show; else elseBlock">Text to show</div>
+    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
+`
+})
+class NgIfElse {
+  show: boolean = true;
+}
+// #enddocregion
+
+// #docregion NgIfThenElse
+@Component({
+  selector: 'ng-if-then-else',
+  template: `
+    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
+    <button (click)="switchPrimary()">Switch Primary</button>
+    show = {{show}}
+    <br>
+    <div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
+    <ng-template #primaryBlock>Primary text to show</ng-template>
+    <ng-template #secondaryBlock>Secondary text to show</ng-template>
+    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
+`
+})
+class NgIfThenElse implements OnInit {
+  thenBlock: TemplateRef<any> = null;
+  show: boolean = true;
+
+  @ViewChild('primaryBlock')
+  primaryBlock: TemplateRef<any> = null;
+  @ViewChild('secondaryBlock')
+  secondaryBlock: TemplateRef<any> = null;
+
+  switchPrimary() {
+    this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;
+  }
+
+  ngOnInit() { this.thenBlock = this.primaryBlock; }
+}
+// #enddocregion
+
+// #docregion NgIfLet
+@Component({
+  selector: 'ng-if-let',
+  template: `
+    <button (click)="nextUser()">Next User</button>
+    <br>
+    <div *ngIf="userObservable | async; else loading; let user">
+      Hello {{user.last}}, {{user.first}}!
+    </div>
+    <ng-template #loading let-user>Waiting... (user is {{user|json}})</ng-template>
+`
+})
+class NgIfLet {
+  userObservable = new Subject<{first: string, last: string}>();
+  first = ['John', 'Mike', 'Mary', 'Bob'];
+  firstIndex = 0;
+  last = ['Smith', 'Novotny', 'Angular'];
+  lastIndex = 0;
+
+  nextUser() {
+    let first = this.first[this.firstIndex++];
+    if (this.firstIndex >= this.first.length) this.firstIndex = 0;
+    let last = this.last[this.lastIndex++];
+    if (this.lastIndex >= this.last.length) this.lastIndex = 0;
+    this.userObservable.next({first, last});
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <ng-if-simple></ng-if-simple>
+    <hr>
+    <ng-if-else></ng-if-else>
+    <hr>
+    <ng-if-then-else></ng-if-then-else>
+    <hr>
+    <ng-if-let></ng-if-let>
+    <hr>
+`
+})
+class ExampleApp {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [ExampleApp, NgIfSimple, NgIfElse, NgIfThenElse, NgIfLet],
+  bootstrap: [ExampleApp]
+})
+export class AppModule {
+}

packages/examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts

@@ -0,0 +1,31 @@
+/**
+ * @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 {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('ngTemplateOutlet', () => {
+  const URL = 'common/ngTemplateOutlet/ts/';
+  afterEach(verifyNoBrowserErrors);
+
+  describe('ng-template-outlet-example', () => {
+    it('should render', () => {
+      browser.get(URL);
+      waitForElement('ng-template-outlet-example');
+      expect(element.all(by.css('ng-template-outlet-example span')).getText()).toEqual([
+        'Hello', 'Hello World!', 'Ahoj Svet!'
+      ]);
+    });
+  });
+});

packages/examples/common/ngTemplateOutlet/ts/module.ts

@@ -0,0 +1,49 @@
+/**
+ * @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, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {Subject} from 'rxjs/Subject';
+
+
+// #docregion NgTemplateOutlet
+@Component({
+  selector: 'ng-template-outlet-example',
+  template: `
+    <ng-container *ngTemplateOutlet="greet"></ng-container>
+    <hr>
+    <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
+    <hr>
+    <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
+    <hr>
+    
+    <ng-template #greet><span>Hello</span></ng-template>
+    <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
+    <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
+`
+})
+class NgTemplateOutletExample {
+  myContext = {$implicit: 'World', localSk: 'Svet'};
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `<ng-template-outlet-example></ng-template-outlet-example>`
+})
+class ExampleApp {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [ExampleApp, NgTemplateOutletExample],
+  bootstrap: [ExampleApp]
+})
+export class AppModule {
+}

packages/examples/common/pipes/ts/async_pipe.ts

@@ -0,0 +1,69 @@
+/**
+ * @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} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Subscriber} from 'rxjs/Subscriber';
+
+// #docregion AsyncPipePromise
+@Component({
+  selector: 'async-promise-pipe',
+  template: `<div>
+    <code>promise|async</code>: 
+    <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
+    <span>Wait for it... {{ greeting | async }}</span>
+  </div>`
+})
+export class AsyncPromisePipeComponent {
+  greeting: Promise<string> = null;
+  arrived: boolean = false;
+
+  private resolve: Function = null;
+
+  constructor() { this.reset(); }
+
+  reset() {
+    this.arrived = false;
+    this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
+  }
+
+  clicked() {
+    if (this.arrived) {
+      this.reset();
+    } else {
+      this.resolve('hi there!');
+      this.arrived = true;
+    }
+  }
+}
+// #enddocregion
+
+// #docregion AsyncPipeObservable
+@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) {
+  const zone = Zone.current;
+  let rootZone = zone;
+  while (rootZone.parent) {
+    rootZone = rootZone.parent;
+  }
+  rootZone.run(
+      () => { window.setInterval(function() { zone.run(fn, this, arguments as any); }, delay); });
+}

packages/examples/common/pipes/ts/date_pipe.ts

@@ -0,0 +1,23 @@
+/**
+ * @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} from '@angular/core';
+
+// #docregion DatePipe
+@Component({
+  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 DatePipeComponent {
+  today: number = Date.now();
+}
+// #enddocregion

packages/examples/common/pipes/ts/e2e_test/pipe_spec.ts

@@ -0,0 +1,44 @@
+/**
+ * @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 {$, ExpectedConditions, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+function waitForElement(selector: string) {
+  const EC = 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', () => {
+    const 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!\'');
+    });
+  });
+});

packages/examples/common/pipes/ts/i18n_pipe.ts

@@ -0,0 +1,30 @@
+/**
+ * @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} from '@angular/core';
+
+// #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

packages/examples/common/pipes/ts/json_pipe.ts

@@ -0,0 +1,24 @@
+/**
+ * @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} from '@angular/core';
+
+// #docregion JsonPipe
+@Component({
+  selector: 'json-pipe',
+  template: `<div>
+    <p>Without JSON pipe:</p>
+    <pre>{{object}}</pre>
+    <p>With JSON pipe:</p>
+    <pre>{{object | json}}</pre>
+  </div>`
+})
+export class JsonPipeComponent {
+  object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
+}
+// #enddocregion

packages/examples/common/pipes/ts/lowerupper_pipe.ts

@@ -0,0 +1,24 @@
+/**
+ * @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} from '@angular/core';
+
+// #docregion LowerUpperPipe
+@Component({
+  selector: 'lowerupper-pipe',
+  template: `<div>
+    <label>Name: </label><input #name (keyup)="change(name.value)" type="text">
+    <p>In lowercase: <pre>'{{value | lowercase}}'</pre>
+    <p>In uppercase: <pre>'{{value | uppercase}}'</pre>
+  </div>`
+})
+export class LowerUpperPipeComponent {
+  value: string;
+  change(value: string) { this.value = value; }
+}
+// #enddocregion

packages/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 {
+}

packages/examples/common/pipes/ts/number_pipe.ts

@@ -0,0 +1,53 @@
+/**
+ * @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} from '@angular/core';
+
+// #docregion NumberPipe
+@Component({
+  selector: 'number-pipe',
+  template: `<div>
+    <p>e (no formatting): {{e}}</p>
+    <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
+    <p>pi (no formatting): {{pi}}</p>
+    <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
+  </div>`
+})
+export class NumberPipeComponent {
+  pi: number = 3.141592;
+  e: number = 2.718281828459045;
+}
+// #enddocregion
+
+// #docregion PercentPipe
+@Component({
+  selector: 'percent-pipe',
+  template: `<div>
+    <p>A: {{a | percent}}</p>
+    <p>B: {{b | percent:'4.3-5'}}</p>
+  </div>`
+})
+export class PercentPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion
+
+// #docregion CurrencyPipe
+@Component({
+  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 CurrencyPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion

packages/examples/common/pipes/ts/slice_pipe.ts

@@ -0,0 +1,38 @@
+/**
+ * @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} from '@angular/core';
+
+// #docregion SlicePipe_string
+@Component({
+  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>
+    <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>
+    <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
+    <p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
+    <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
+  </div>`
+})
+export class SlicePipeStringComponent {
+  str: string = 'abcdefghij';
+}
+// #enddocregion
+
+// #docregion SlicePipe_list
+@Component({
+  selector: 'slice-list-pipe',
+  template: `<ul>
+    <li *ngFor="let i of collection | slice:1:3">{{i}}</li>
+  </ul>`
+})
+export class SlicePipeListComponent {
+  collection: string[] = ['a', 'b', 'c', 'd'];
+}
+// #enddocregion