The angular pipe (pipe), and custom conduit

http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34 
. 1 case conversion.
  <P> {{STR | UPPERCASE}} </ P> // uppercase 
<p> {{str | lowercase }} </ p > // convert to lower case 

 2 the date format.
 
 <P> {{Today | dATE: 'the mM-dd-YYYY HH: mm: SS'}} </ P> 

 . 3 . decimal
  // parameter format is received {} {minimum integer digits decimal least} - {up} decimal places. 
// reserved 2 to 4 decimal places <P> {{P | Number: '1.2-4'}} </ P>
 
 . 4 . JavaScript Object serialization
  <P> {{{name: 'semlinker'} |}} JSON </ P> <- - the Output:: { "name" "semlinker"}!> 

 . 5 Slice.
  <P> {{ 'semlinker' | Slice: <! - the Output: SEM ->: 0. 3}} </ P> 


 . 6 . pipeline chain
 
 <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->


 7Custom pipeline 
 step custom pipes: Pipe using @Pipe decorative define the metadata information, such as name Pipe - i.e. name attribute transform implemented method defined in the interface PipeTransform 1.1 WelcomePipe defined 
Import {Pipe, PipeTransform} from '@angular / Core ' ; 
[@Pipe] ( / User / Pipe) ({name:' available for purchase ' }) 
Export WelcomePipe the implements PipeTransform {class 
  Transform (value: String): String { 
    IF (! value) return value;
     IF ( typeof value ! == 'String' ) {
       the throw  new new Error ( 'Invalid argument for WelcomePipe pipe' ); 
    } 
    return "available for purchase to" +  value;
  }
} 
1.2 WelcomePipe 使用 <div>
   <p ngNonBindable>{{ 'semlinker' | welcome }}</p>
   <p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker -->
</div>
2.1 RepeatPipe 定义 import {Pipe, PipeTransform} from '@angular/core';
[@Pipe](/user/Pipe)({name: 'repeat'})
export class RepeatPipe implements PipeTransform {
    transform(value: any, times: number) {
        return value.repeat(times);
    }
}

2.2 RepeatPipe 使用 <div>
   <p ngNonBindable>{{ 'lo' | repeat:3 }}</p>
   <p>{{ 'lo' | repeat:3 }}</p> <!-- Output: lololo -->
</div>