Built-in Pipes

Go back to Tutorial

Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe. They are all available for use in any template.

CurrencyPipe

This pipe is used for formatting currencies. Its first argument is an abbreviation of the currency type (e.g. “EUR”, “USD”, and so on), like so:

{{ 1234.56 | currency:’CAD’ }}

The above prints out CA$1,234.56.

If instead of the abbreviation of CA$ we want the currency symbol to be printed out we pass as a second parameter the string symbol-narrow, like so:

{{ 1234.56 | currency:”CAD”:”symbol-narrow” }}

The above prints out $1,234.56.

Its syntax is as –

number_expression | currency[:currencyCode[:display[:digitInfo[:locale]]]]

Description

Use currency to format a number as currency.

• currencyCode is the ISO 4217 currency code, such as USD for the US dollar and EUR for the euro.
• display indicates whether to show the currency symbol or the code.
• code: use code (e.g. USD).
• symbol(default): use symbol (e.g. $).
• symbol-narrow: some countries have two symbols for their currency, one regular and one narrow (e.g. the canadian dollar CAD has the symbol CA$ and the symbol-narrow $).
• boolean (deprecated from v5): true for symbol and false for code If there is no narrow symbol for the chosen currency, the regular symbol will be used.
• digitInfo See DecimalPipe for detailed description.
• locale is a string defining the locale to use (uses the current LOCALE_ID by default)

DatePipe

Its syntax is as

date_expression | date[:format[:timezone[:locale]]]

Description

Where:

• expression is a date object or a number (milliseconds since UTC epoch) or an ISO string (https://www.w3.org/TR/NOTE-datetime).
• format indicates which date/time components to include. The format can be predefined as shown below (all examples are given for en-US) or custom as shown in the table.
• ‘short’: equivalent to ‘M/d/yy, h:mm a’ (e.g. 6/15/15, 9:03 AM)
• ‘medium’: equivalent to ‘MMM d, y, h:mm:ss a’ (e.g. Jun 15, 2015, 9:03:01 AM)
• ‘long’: equivalent to ‘MMMM d, y, h:mm:ss a z’ (e.g. June 15, 2015 at 9:03:01 AM GMT+1)
• ‘full’: equivalent to ‘EEEE, MMMM d, y, h:mm:ss a zzzz’ (e.g. Monday, June 15, 2015 at 9:03:01 AM GMT+01:00)
• ‘shortDate’: equivalent to ‘M/d/yy’ (e.g. 6/15/15)
• ‘mediumDate’: equivalent to ‘MMM d, y’ (e.g. Jun 15, 2015)
• ‘longDate’: equivalent to ‘MMMM d, y’ (e.g. June 15, 2015)
• ‘fullDate’: equivalent to ‘EEEE, MMMM d, y’ (e.g. Monday, June 15, 2015)
• ‘shortTime’: equivalent to ‘h:mm a’ (e.g. 9:03 AM)
• ‘mediumTime’: equivalent to ‘h:mm:ss a’ (e.g. 9:03:01 AM)
• ‘longTime’: equivalent to ‘h:mm:ss a z’ (e.g. 9:03:01 AM GMT+1)
• ‘fullTime’: equivalent to ‘h:mm:ss a zzzz’ (e.g. 9:03:01 AM GMT+01:00)
• timezone to be used for formatting. It understands UTC/GMT and the continental US time zone abbreviations, but for general use, use a time zone offset, for example, ‘+0430’ (4 hours, 30 minutes east of the Greenwich meridian) If not specified, the local system timezone of the end-user’s browser will be used.
• locale is a string defining the locale to use (uses the current LOCALE_ID by default)

DecimalPipe

This pipe is used for transformation of decimal numbers. The first argument is a format string of the form “{minIntegerDigits}. {minFractionDigits}-{maxFractionDigits}”.

Its syntax is as

number_expression | number[:digitInfo[:locale]]

Formats a number as text. Group sizing and separator and other locale-specific configurations are based on the active locale.

where expression is a number:

• digitInfo is a string which has a following format:
• {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
• minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.
• minFractionDigits is the minimum number of digits after fraction. Defaults to 0.
• maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.
• locale is a string defining the locale to use (uses the current LOCALE_ID by default)

LowerCasePipe

It transforms text to lowercase, as example below

@Component({

selector: ‘lowerupper-pipe’,

template: `<div>

<label>Name: </label><input #name (keyup)=”change(name.value)” type=”text”>

<p>In lowercase: <pre>'{{value | lowercase}}'</pre>

<p>In uppercase: <pre>'{{value | uppercase}}'</pre>

</div>`

})

export class LowerUpperPipeComponent {

value: string;

change(value: string) { this.value = value; }

}

JsonPipe

Its syntax is as

expression | json

Description – Converts value into string using JSON.stringify. Useful for debugging.

Example

@Component({

selector: ‘json-pipe’,

template: `<div>

<p>Without JSON pipe:</p>

<pre>{{object}}</pre>

<p>With JSON pipe:</p>

<pre>{{object | json}}</pre>    </div>` })

export class JsonPipeComponent {

object: Object = {foo: ‘bar’, baz: ‘qux’, nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};

}

Go back to Tutorial