<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {
  FlyingHeroesComponent,
  FlyingHeroesImpureComponent
} from './flying-heroes.component';
import { HeroAsyncMessageComponent } from './hero-async-message.component';
import { HeroBirthdayComponent } from './hero-birthday1.component';
import { HeroBirthday2Component } from './hero-birthday2.component';
import { HeroListComponent } from './hero-list.component';
import { PowerBoosterComponent } from './power-booster.component';
import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
import {
  FlyingHeroesPipe,
  FlyingHeroesImpurePipe
} from './flying-heroes.pipe';
import { FetchJsonPipe } from './fetch-json.pipe';
import { ExponentialStrengthPipe } from './exponential-strength.pipe';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  declarations: [
    AppComponent,
    FlyingHeroesComponent,
    FlyingHeroesImpureComponent,
    HeroAsyncMessageComponent,
    HeroBirthdayComponent,
    HeroBirthday2Component,
    HeroListComponent,
    PowerBoosterComponent,
    PowerBoostCalculatorComponent,
    FlyingHeroesPipe,
    FlyingHeroesImpurePipe,
    FetchJsonPipe,
    ExponentialStrengthPipe
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/exponential-strength.pipe.ts]" value="import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 |  exponentialStrength:10}}
 *   formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/fetch-json.pipe.ts]" value="import { Pipe, PipeTransform } from '@angular/core';
import { Http }                from '@angular/http';

import 'rxjs/add/operator/map';

@Pipe({
  name: 'fetch',
  pure: false
})
export class FetchJsonPipe  implements PipeTransform {
  private cachedData: any = null;
  private cachedUrl = '';

  constructor(private http: Http) { }

  transform(url: string): any {
    if (url !== this.cachedUrl) {
      this.cachedData = null;
      this.cachedUrl = url;
      this.http.get(url)
        .map( result => result.json() )
        .subscribe( result => this.cachedData = result );
    }

    return this.cachedData;
  }
}


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/flying-heroes.component.ts]" value="import { Component }              from '@angular/core';

import { HEROES }                 from './heroes';

@Component({
  moduleId: module.id,
  selector: 'flying-heroes',
  templateUrl: './flying-heroes.component.html',
  styles: ['#flyers, #all {font-style: italic}']
})
export class FlyingHeroesComponent {
  heroes: any[] = [];
  canFly = true;
  mutate = true;
  title = 'Flying Heroes (pure pipe)';

  constructor() { this.reset(); }

  addHero(name: string) {
    name = name.trim();
    if (!name) { return; }
    let hero = {name, canFly: this.canFly};
    if (this.mutate) {
    // Pure pipe won't update display because heroes array reference is unchanged
    // Impure pipe will display
    this.heroes.push(hero);
    } else {
      // Pipe updates display because heroes array is a new object
      this.heroes = this.heroes.concat(hero);
    }
  }

  reset() { this.heroes = HEROES.slice(); }
}

////// Identical except for impure pipe //////
@Component({
  moduleId: module.id,
  selector: 'flying-heroes-impure',
  templateUrl: './flying-heroes-impure.component.html',
  styles: ['.flyers, .all {font-style: italic}'],
})
export class FlyingHeroesImpureComponent extends FlyingHeroesComponent {
  title = 'Flying Heroes (impure pipe)';
}


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/flying-heroes.pipe.ts]" value="/* tslint:disable use-pipe-transform-interface */
import { Pipe, PipeTransform } from '@angular/core';

import { Flyer } from './heroes';

@Pipe({ name: 'flyingHeroes' })
export class FlyingHeroesPipe implements PipeTransform {
  transform(allHeroes: Flyer[]) {
    return allHeroes.filter(hero => hero.canFly);
  }
}

/////// Identical except for the pure flag
@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})
export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/hero-async-message.component.ts]" value="import { Component } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

@Component({
  selector: 'hero-message',
  template: `
    <h2>Async Hero Message and AsyncPipe</h2>
    <p>Message: {{ message$ | async }}</p>
    <button (click)=&quot;resend()&quot;>Resend</button>`,
})
export class HeroAsyncMessageComponent {
  message$: Observable<string>;

  private messages = [
    'You are my hero!',
    'You are the best hero!',
    'Will you be my hero?'
  ];

  constructor() { this.resend(); }

  resend() {
    this.message$ = Observable.interval(500)
      .map(i => this.messages[i])
      .take(this.messages.length);
  }
}

// Alternative message$ formula:
// this.message$ = Observable.fromArray(this.messages)
//   .map(message => Observable.timer(500).map(() => message))
//   .concatAll();


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/hero-birthday1.component.ts]" value="import { Component } from '@angular/core';

@Component({
  selector: 'hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/hero-birthday2.component.ts]" value="import { Component } from '@angular/core';

@Component({
  selector: 'hero-birthday2',
  template: `
    <p>The hero's birthday is {{ birthday | date:format }}</p>
    <button (click)=&quot;toggleFormat()&quot;>Toggle Format</button>
  `
})
export class HeroBirthday2Component {
  birthday = new Date(1988, 3, 15); // April 15, 1988
  toggle = true; // start with true == shortDate

  get format()   { return this.toggle ? 'shortDate' : 'fullDate'; }
  toggleFormat() { this.toggle = !this.toggle; }
}


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list.component.ts]" value="import { Component } from '@angular/core';

@Component({
  selector: 'hero-list',
  template: `
    <h2>Heroes from JSON File</h2>

    <div *ngFor=&quot;let hero of ('heroes.json' | fetch) &quot;>
      {{hero.name}}
    </div>

    <p>Heroes as JSON:
      {{'heroes.json' | fetch | json}}
    </p>`
})
export class HeroListComponent { }


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/heroes.ts]" value="export interface Flyer { canFly: boolean; }
export const HEROES =  [
  {name: 'Windstorm', canFly: true},
  {name: 'Bombasto',  canFly: false},
  {name: 'Magneto',   canFly: false},
  {name: 'Tornado',   canFly: true}
];


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/power-boost-calculator.component.ts]" value="import { Component } from '@angular/core';

@Component({
  selector: 'power-boost-calculator',
  template: `
    <h2>Power Boost Calculator</h2>
    <div>Normal power: <input [(ngModel)]=&quot;power&quot;></div>
    <div>Boost factor: <input [(ngModel)]=&quot;factor&quot;></div>
    <p>
      Super Hero Power: {{power | exponentialStrength: factor}}
    </p>
  `
})
export class PowerBoostCalculatorComponent {
  power = 5;
  factor = 1;
}


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/power-booster.component.ts]" value="import { Component } from '@angular/core';

@Component({
  selector: 'power-booster',
  template: `
    <h2>Power Booster</h2>
    <p>Super power boost: {{2 | exponentialStrength: 10}}</p>
  `
})
export class PowerBoosterComponent { }


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
a {
  cursor: pointer;
  cursor: hand;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* Navigation link styles */
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}

/* items class */
.items {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 24em;
}
.items li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.items li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.items li.selected {
  background-color: #CFD8DC;
  color: white;
}
.items li.selected:hover {
  background-color: #BBD8DC;
}
.items .text {
  position: relative;
  top: -3px;
}
.items .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607D8B;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}


/*
Copyright 2016 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 http://angular.io/license
*/"><input type="hidden" name="files[app/app.component.html]" value="<a id=&quot;toc&quot;></a>
<h1>Pipes</h1>
<a href=&quot;#happy-birthday1&quot;>Happy Birthday v1</a><br>
<a href=&quot;#birthday-date-pipe&quot;>Birthday DatePipe</a><br>
<a href=&quot;#happy-birthday2&quot;>Happy Birthday v2</a><br>
<a href=&quot;#birthday-pipe-chaining&quot;>Birthday Pipe Chaining</a><br>
<a href=&quot;#power-booster&quot;>Power Booster custom pipe</a><br>
<a href=&quot;#power-boost-calc&quot;>Power Boost Calculator custom pipe with params</a><br>
<a href=&quot;#flying-heroes&quot;>Flying Heroes filter pipe (pure)</a><br>
<a href=&quot;#flying-heroes-impure&quot;>Flying Heroes filter pipe (impure)</a><br>
<a href=&quot;#hero-message&quot;>Async Hero Message and AsyncPipe</a><br>
<a href=&quot;#hero-list&quot;>Hero List with caching FetchJsonPipe</a><br>


<hr>
<a id=&quot;happy-birthday1&quot;></a>
<h2>Hero Birthday v1</h2>
<hero-birthday></hero-birthday>

<hr>
<a id=&quot;birthday-date-pipe&quot;></a>
<h2>Birthday DatePipe</h2>
<p>The hero's birthday is {{ birthday | date }}</p>

<p>The hero's birthday is {{ birthday | date:&quot;MM/dd/yy&quot; }} </p>

<hr>
<a id=&quot;happy-birthday2&quot;></a>
<h2>Hero Birthday v2</h2>
<hero-birthday2></hero-birthday2>

<hr>
<a id=&quot;birthday-pipe-chaining&quot;></a>
<h2>Birthday Pipe Chaining</h2>
<p>
  The chained hero's birthday is
  {{ birthday | date | uppercase}}
</p>

<p>
  The chained hero's birthday is
  {{  birthday | date:'fullDate' | uppercase}}
</p>
<p>
  The chained hero's birthday is
  {{ ( birthday | date:'fullDate' ) | uppercase}}
</p>
<hr>
<a id=&quot;power-booster&quot;></a>
<power-booster></power-booster>

<hr>
<a id=&quot;power-boost-calc&quot;></a>
<power-boost-calculator>loading</power-boost-calculator>

<hr>
<a id=&quot;flying-heroes&quot;></a>
<flying-heroes></flying-heroes>

<hr>
<a id=&quot;flying-heroes-impure&quot;></a>
<flying-heroes-impure></flying-heroes-impure>

<hr>
<a id=&quot;hero-message&quot;></a>
<!-- async examples at the top so can see them in action -->
<hero-message></hero-message>

<hr>
<a id=&quot;hero-list&quot;></a>
<hero-list></hero-list>

<div style=&quot;margin-top:12em;&quot;></div>


<!-- 
Copyright 2016 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 http://angular.io/license
-->"><input type="hidden" name="files[app/flying-heroes-impure.component.html]" value="<h2>{{title}}</h2>
<p>
New hero:
  <input type=&quot;text&quot; #box
          (keyup.enter)=&quot;addHero(box.value); box.value=''&quot;
          placeholder=&quot;hero name&quot;>
  <input id=&quot;can-fly&quot; type=&quot;checkbox&quot; [(ngModel)]=&quot;canFly&quot;> can fly
</p>
<p>
  <input id=&quot;mutate&quot; type=&quot;checkbox&quot; [(ngModel)]=&quot;mutate&quot;>Mutate array
  <button (click)=&quot;reset()&quot;>Reset</button>
</p>

<h4>Heroes who fly (piped)</h4>
<div id=&quot;flyers&quot;>
  <div *ngFor=&quot;let hero of (heroes | flyingHeroesImpure)&quot;>
    {{hero.name}}
  </div>
</div>

<h4>All Heroes (no pipe)</h4>
<div id=&quot;all&quot;>
  <div *ngFor=&quot;let hero of heroes&quot;>
    {{hero.name}}
  </div>
</div>


<!-- 
Copyright 2016 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 http://angular.io/license
-->"><input type="hidden" name="files[app/flying-heroes.component.html]" value="<h2>{{title}}</h2>
<p>
New hero:
  <input type=&quot;text&quot; #box
          (keyup.enter)=&quot;addHero(box.value); box.value=''&quot;
          placeholder=&quot;hero name&quot;>
  <input id=&quot;can-fly&quot; type=&quot;checkbox&quot; [(ngModel)]=&quot;canFly&quot;> can fly
</p>
<p>
  <input id=&quot;mutate&quot; type=&quot;checkbox&quot; [(ngModel)]=&quot;mutate&quot;>Mutate array
  <button (click)=&quot;reset()&quot;>Reset</button>
</p>

<h4>Heroes who fly (piped)</h4>
<div id=&quot;flyers&quot;>
  <div *ngFor=&quot;let hero of (heroes | flyingHeroes)&quot;>
    {{hero.name}}
  </div>
</div>

<h4>All Heroes (no pipe)</h4>
<div id=&quot;all&quot;>
  <div *ngFor=&quot;let hero of heroes&quot;>
    {{hero.name}}
  </div>
</div>


<!-- 
Copyright 2016 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 http://angular.io/license
-->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
<html>
  <head>
    <title>Pipes</title>
    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
    <meta charset=&quot;UTF-8&quot;>
    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>

    <!-- Polyfills -->
    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>

    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>

    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>my-app loading ...</my-app>
  </body>

</html>


<!-- 
Copyright 2016 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 http://angular.io/license
-->"><input type="hidden" name="files[heroes.json]" value="[
  {&quot;name&quot;: &quot;Windstorm&quot;, &quot;canFly&quot;: true},
  {&quot;name&quot;: &quot;Bombasto&quot;,  &quot;canFly&quot;: false},
  {&quot;name&quot;: &quot;Magneto&quot;,   &quot;canFly&quot;: false},
  {&quot;name&quot;: &quot;Tornado&quot;,   &quot;canFly&quot;: true}
]
"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="pipe"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Pipes"></form><script>document.getElementById("mainForm").submit();</script></body></html>