Tutorial by Examples

Pipes may be chained. <p>Today is {{ today | date:'fullDate' | uppercase}}.</p>

my.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'myPipe'}) export class MyPipe implements PipeTransform { transform(value:any, args?: any):string { let transformedValue = value; // implement your transformation logic here return transformedValue; }...

Angular2 comes with a few built-in pipes: PipeUsageExampleDatePipedate{{ dateObj | date }} // output is 'Jun 15, 2015'UpperCasePipeuppercase{{ value | uppercase }} // output is 'SOMETEXT'LowerCasePipelowercase{{ value | lowercase }} // output is 'sometext'CurrencyPipecurrency{{ 31.00 | currency:'US...

The JsonPipe can be used for debugging the state of any given internal. Code @Component({ selector: 'json-example', template: `<div> <p>Without JSON pipe:</p> <pre>{{object}}</pre> <p>With JSON pipe:</p> <pre>{{object | json...

To make a custom pipe available application wide, During application bootstrap, extending PLATFORM_PIPES. import { bootstrap } from '@angular/platform-browser-dynamic'; import { provide, PLATFORM_PIPES } from '@angular/core'; import { AppComponent } from './app.component'; import { MyPipe }...

app/pipes.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'truthy'}) export class Truthy implements PipeTransform { transform(value: any, truthy: string, falsey: string): any { if (typeof value === 'boolean'){return value ? truthy : falsey;} else return va...

import { Component } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; @Component({ selector: 'async-stuff', template: ` <h1>Hello, {{ name | async }}</h1> Your Friends are: <ul> <li *ngFor=&quot...

import { Pipe, PipeTransform } from '@angular/core'; import { DatePipe } from '@angular/common' @Pipe({name: 'ifDate'}) export class IfDate implements PipeTransform { private datePipe: DatePipe = new DatePipe(); transform(value: any, pattern?:string) : any { if (typeof value === ...

Angular 2 offers two different types of pipes - stateless and stateful. Pipes are stateless by default. However, we can implement stateful pipes by setting the pure property to false. As you can see in the parameter section, you can specify a name and declare whether the pipe should be pure or not, ...

Use case scenario: A table view consists of different columns with different data format that needs to be transformed with different pipes. table.component.ts ... import { DYNAMIC_PIPES } from '../pipes/dynamic.pipe.ts'; @Component({ ... pipes: [DYNAMIC_PIPES] }) export class Tabl...

Given a pipe that reverse a string import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'reverse' }) export class ReversePipe implements PipeTransform { transform(value: string): string { return value.split('').reverse().join(''); } } It can be tested configuring th...