Show Menu
Cheatography
  1. Home >
  2. Programming >

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]
 

Metadata

  • Languages:
  • Published: 23rd May, 2016
  • Rated: 5 out of 5 stars based on 1 ratings

Favourited By

catchatpas mattsterp addyosami

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