Angular 2 Pipes Built-in Pipes

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

Angular2 comes with a few built-in pipes:

PipeUsageExample
DatePipedate{{ dateObj | date }} // output is 'Jun 15, 2015'
UpperCasePipeuppercase{{ value | uppercase }} // output is 'SOMETEXT'
LowerCasePipelowercase{{ value | lowercase }} // output is 'sometext'
CurrencyPipecurrency{{ 31.00 | currency:'USD':true }} // output is '$31'
PercentPipepercent{{ 0.03 | percent }} //output is %3

There are others. Look here for their documentation.

Example

hotel-reservation.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'hotel-reservation',
    templateUrl: './hotel-reservation.template.html'
})
export class HotelReservationComponent {
    public fName: string =  'Joe';
    public lName: string = 'SCHMO';
    public reservationMade: string = '2016-06-22T07:18-08:00'
    public reservationFor: string = '2025-11-14';
    public cost: number = 99.99;
}

hotel-reservation.template.html

<div>
    <h1>Welcome back {{fName | uppercase}} {{lName | lowercase}}</h1>
    <p>
        On {reservationMade | date} at {reservationMade | date:'shortTime'} you 
        reserved room 205 for {reservationDate | date} for a total cost of 
        {cost | currency}.
    </p>
</div>

Output

Welcome back JOE schmo
On Jun 26, 2016 at 7:18 you reserved room 205 for Nov 14, 2025 for a total cost of 
$99.99.


Got any Angular 2 Question?