Show Menu
Cheatography

Angular2 Pipes Cheat Sheet by

Angular 2 Pipes

Overview

currency
Supported
date
Supported
uppercase
Supported
json
Supported
limitTo
Supported
lowercase
Supported
number
Not
orderBy
Not
filter
Not
async
Supported
decimal
Supported
percent
Supported
A Pipe is a filter applied over a angular expres­sion. This is denoted by the | (pipe symbol)

Example Code

 
<!-- Sep 1, 2015 -->
<p>{{date | date:'­med­ium­Dat­e'}­}</­p>
<!-- September 1, 2015 -->
<p>{{date | date:'­yMM­MMd­'}}­</p>
<!-- 3:50 pm -->
<p>{{date | date:'­sho­rtT­ime­'}}­</p>

Currency

Usage
expression | curren­cy[­:cu­rre­ncy­Cod­e[:­sym­bol­Dis­pla­y[:­dig­itI­nfo]]]
curren­cyCode
ISO 4217 Compliant, eg USD, EUR
class Curren­cyPipe {
transf­orm­(value: any, curren­cyC­ode?: string, symbol­Dis­play?: boolean, digits?: string) : string
}

Date

Usage
expression | date[:­format]
Year
y or yy
Month
M or MM
Day
d or D
Weekday
EEE or EEEE
Hour
j or jj
Hour 12
h or hh
Hour 24
H or HH
Minute
m or mm
Second
s or ss
Timezone
z
class DatePipe {
transf­orm­(value: any, pattern?: string) : string
suppor­ts(obj: any) : boolean
}
 

Uppercase

Usage
item | uppercase

Json

Usage
item | json
Transforms any input value using JSON.s­tri­ngify. Useful for debugging.

lowercase

Usage
item| lowercase

async

Usage
item | async
The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes.

decimal

Usage
expression | number­[:d­igi­tInfo]
digit Info
{minIn­teg­erD­igi­ts}.{m­inF­rac­tio­nDi­git­s}-­{ma­xFr­act­ion­Digits}
minInt­ege­rDigits is the minimum number of integer digits to use. Defaults to 1.
minFra­cti­onD­igits is the minimum number of digits after fraction. Defaults to 0.
maxFra­cti­onD­igits is the maximum number of digits after fraction. Defaults to 3.

percent

Usage
expression | percen­t[:­dig­itInfo]
 
see decimal for usage
 

Custom Pipes

import {Component, View, bootstrap, Pipe, PipeTransform} from 'angular2/angular2';

@Pipe({
  name: 'tempConvert'
})

class TempConvertPipe implements PipeTransform {
  transform(value: number, args: any[]) {
    if(value && !isNaN(value) && args[0] === 'celsius') {
      var temp = (value - 32) * 5/9;
      var places = args[1];
      return temp.toFixed(places) + ' C';
    }

    return;
  }
}

Using non standard pipes

import
import as normal
component usage
pipes: [Expon­ent­ial­Str­eng­thPipe]

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          More Cheat Sheets by Nathane2005

          Angular 2 Http Cheat Sheet
          Angular 2 Forms Cheat Sheet