Angular built-in pipes examples

Angular provides different types of built-in pipes like DatePipe, CurrencyPipe, Upper/Lower/Title case pipes etc. In this post we shall see examples of some of the commonly used built-in pipes.

DatePipe
DatePipe is used format date and time, it takes a Date object followed by a date pipe, followed by a formatting parameter which tells how the date should be formatted

<Date Object> | date : <format>

Following are some of the sample for DatePipe formatting.

Pipe	Output
{{ currentDate | date: 'short' }}	11/27/18, 11:56 PM
{{ currentDate | date: 'medium' }}	Nov 27, 2018, 11:58:42 PM
{{ currentDate | date: 'long' }}	November 27, 2018 at 11:58:08 PM GMT-5
{{ currentDate | date: 'shortDate' }}	11/28/18
{{ currentDate | date: 'mediumDate' }}	Nov 28, 2018
{{ currentDate | date: 'longDate' }}	November 28, 2018
{{ currentDate | date: 'shortTime' }}	12:02 AM
{{ currentDate | date: 'mediumTime' }}	12:02:05 AM
{{ currentDate | date: 'longTime' }}	12:02:05 AM GMT-5

CurrencyPipe
The CurrencyPipe transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

CurrencyPipe takes a number as input, followed by the currency pipe and a parameter to specify the required format.

<number> | currency : <format parameters>

Following are some of the sample for CurrencyPipe formatting.

Pipe	Output
{{ 1500.45 | currency }}	$1,500.45
{{ 1500.45 | currency : 'USD' }}	$1,500.45
{{ 1500.45 | currency : 'USD' : 'symbol' }}	$1,500.45
{{ 1500.45 | currency : 'USD' : 'code' }}	USD1,500.45