Show Menu

Angular2 Pipes Cheat Sheet by

Angular 2 Pipes
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]

Download the Angular2 Pipes Cheat Sheet

1 Page
//media.cheatography.com/storage/thumb/nathane2005_angular2-pipes.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

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 Forms Cheat Sheet
          Angular 2 Http Cheat Sheet