parent
f4c69b6ad0
commit
8d89118031
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
import {Pipe, PipeTransform} from 'angular2/core';
|
||||
/*
|
||||
* Raise the value exponentially
|
||||
* Takes an exponent argument that defaults to 1.
|
||||
|
@ -10,7 +10,7 @@ import {Pipe} from 'angular2/core';
|
|||
* formats to: 1024
|
||||
*/
|
||||
@Pipe({name: 'exponentialStrength'})
|
||||
export class ExponentialStrengthPipe {
|
||||
export class ExponentialStrengthPipe implements PipeTransform {
|
||||
|
||||
transform(value:number, args:string[]) : any {
|
||||
return Math.pow(value, parseInt(args[0] || '1', 10));
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/// <reference path='./window.extension.d.ts'/>
|
||||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
import {Pipe, PipeTransform} from 'angular2/core';
|
||||
|
||||
// #docregion pipe-metadata
|
||||
@Pipe({
|
||||
|
@ -8,7 +8,7 @@ import {Pipe} from 'angular2/core';
|
|||
pure: false
|
||||
})
|
||||
// #enddocregion pipe-metadata
|
||||
export class FetchJsonPipe {
|
||||
export class FetchJsonPipe implements PipeTransform{
|
||||
private fetchedValue:any;
|
||||
private fetchPromise:Promise<any>;
|
||||
|
||||
|
|
|
@ -123,8 +123,8 @@ figure.image-display
|
|||
This pipe definition reveals several key points
|
||||
|
||||
* A pipe is a class decorated with pipe metadata.
|
||||
|
||||
* The pipe class implements a `transform` method that
|
||||
|
||||
* The pipe class implements the `PipeTransform` interface's `transform` method that
|
||||
takes an input value and an optional array of parameter strings and returns the transformed value.
|
||||
|
||||
* There will be one item in the parameter array for each parameter passed to the pipe
|
||||
|
@ -136,7 +136,15 @@ figure.image-display
|
|||
pipe name that we'll use within a template expression. It must be a valid JavaScript identifier.
|
||||
Our pipe's name is `exponenentialStrength`.
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
### The *PipeTransform* Interface
|
||||
|
||||
The `transform` method is essential to a pipe.
|
||||
The `PipeTransform` interface defines that method and guides both tooling and the compiler.
|
||||
It is optional; Angular looks for and executes the `transform` method regardless.
|
||||
|
||||
:marked
|
||||
Now we need a component to demonstrate our pipe.
|
||||
+makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')
|
||||
figure.image-display
|
||||
|
|
Loading…
Reference in New Issue