docs(pipes): add PipeTransform interface & comment

closes #616
This commit is contained in:
Ward Bell 2015-12-28 11:52:41 -08:00
parent f4c69b6ad0
commit 8d89118031
3 changed files with 14 additions and 6 deletions

View File

@ -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));

View File

@ -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>;

View File

@ -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