Angular 2.0 Pipes
Download as PPTX, PDF5 likes1,873 views
This document contains code examples of custom pipes in Angular. It defines an exponential strength pipe that takes a value and exponent, a pipe that fetches JSON data from a URL, and components that use these pipes to transform values and data. The exponential pipe powers a number by the given exponent. The fetch pipe retrieves JSON from a URL only once and caches the result. Components apply these pipes to bind data and transform values in their templates.
![{{ expression [| pipe_name[:parameter_value] ... ] }}](https://image.slidesharecdn.com/pipes-160112165353/85/Angular-2-0-Pipes-3-320.jpg)
![@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value:number, args:string[]) : any {
return Math.pow(value, parseInt(args[0] || '1', 10));
}
}](https://image.slidesharecdn.com/pipes-160112165353/85/Angular-2-0-Pipes-5-320.jpg)
![import {Component} from '@angular/core';
import {ExponentialStrengthPipe} from './exponential-strength.pipe';
@Component({
selector: 'power-booster',
template: `
<h2>Power Booster</h2>
<p>
Super power boost: {{ 2 | exponentialStrength: 10 }}
</p>
`,
pipes: [ExponentialStrengthPipe]
})
export class PowerBooster { }](https://image.slidesharecdn.com/pipes-160112165353/85/Angular-2-0-Pipes-6-320.jpg)
![import {Pipe} from '@angular/core';
@Pipe({ name: 'fetch', pure: false })
export class FetchJsonPipe {
private fetchedValue:any;
private fetchPromise:Promise<any>;
transform(value:string, args:string[]):any {
if (!this.fetchPromise) {
this.fetchPromise = window.fetch(value)
.then((result:any) => result.json())
.then((json:any) => this.fetchedValue = json);
}
return this.fetchedValue;
}
}](https://image.slidesharecdn.com/pipes-160112165353/85/Angular-2-0-Pipes-8-320.jpg)
![import {FetchJsonPipe} from './fetch-json.pipe';
@Component({
selector: 'hero-list',
template: `
<h4>Heroes from JSON File</h4>
<div *ngFor="let hero of ( 'heroes.json' | fetch ) ">
{{hero.name}}
</div>
<p>Heroes as JSON:
{{ 'heroes.json' | fetch | json }}
</p>
`,
pipes: [FetchJsonPipe]
})
export class HeroListComponent {
/* I've got nothing to do ;-) */
}](https://image.slidesharecdn.com/pipes-160112165353/85/Angular-2-0-Pipes-9-320.jpg)
Angular 2.0 Pipes
- 3. {{ expression [| pipe_name[:parameter_value] ... ] }}
- 5. @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform { transform(value:number, args:string[]) : any { return Math.pow(value, parseInt(args[0] || '1', 10)); } }
- 6. import {Component} from '@angular/core'; import {ExponentialStrengthPipe} from './exponential-strength.pipe'; @Component({ selector: 'power-booster', template: ` <h2>Power Booster</h2> <p> Super power boost: {{ 2 | exponentialStrength: 10 }} </p> `, pipes: [ExponentialStrengthPipe] }) export class PowerBooster { }
- 7. // Initial view: "Message: " // After 500ms: Message: You are my Hero!" @Component({ selector: 'hero-message', template: 'Message: {{ delayedMessage | async }}', }) export class HeroAsyncMessageComponent { delayedMessage = new Promise((resolve, reject) => { setTimeout(() => resolve('You are my Hero!'), 500); }); }
- 8. import {Pipe} from '@angular/core'; @Pipe({ name: 'fetch', pure: false }) export class FetchJsonPipe { private fetchedValue:any; private fetchPromise:Promise<any>; transform(value:string, args:string[]):any { if (!this.fetchPromise) { this.fetchPromise = window.fetch(value) .then((result:any) => result.json()) .then((json:any) => this.fetchedValue = json); } return this.fetchedValue; } }
- 9. import {FetchJsonPipe} from './fetch-json.pipe'; @Component({ selector: 'hero-list', template: ` <h4>Heroes from JSON File</h4> <div *ngFor="let hero of ( 'heroes.json' | fetch ) "> {{hero.name}} </div> <p>Heroes as JSON: {{ 'heroes.json' | fetch | json }} </p> `, pipes: [FetchJsonPipe] }) export class HeroListComponent { /* I've got nothing to do ;-) */ }