Pipes In Angular 2

Introduction

AngularJS 1.x has filters which are used for many common uses, like formatting dates, string display in upper or lower case etc. These filters are known as "Pipes" in Angular 2.

Pipes allow us to change the data inside the template. Normally, a pipe takes the data and transforms this input to the desired output. There are many built-in pipes in Angular 2. In this article, we will cover build-in pipes of Angular 2 applications.

To demonstrate the example, I have already created an Angular 2 app. Within component, I have created a member variable which is used in template HTML.

App.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/PipesExample.html'
})
export class AppComponent {
    joiningDate = new Date(1990, 4, 15, 15, 12, 10);
    name = 'Jignesh';
  grade = 0.99;
    rating = 8.36;
    priceEuro = 80.6;
    priceUsd = 145.6;
    description = "This is my Test";
              testArray:Array<any> =[{id:1, name:'Test 1'},{id:2, name: 'Test 2'}];
}

PipesExample.html

<h4>Pipes in Angular 2 Application</h4>

Date Pipes

Date Pipe is very similar to date filter in AngularJS 1.x. Following are some examples of date pipes. Here, we have various options to format the date using these pipes.

PipesExample.html

<div>
    <h4>Date Pipe Example</h4>
    <b>Date format:</b> My joining Date is {{joiningDate | date}}.<br/>
    <b>Specific Date Format:</b> My joining Date is {{joiningDate | date:"dd/MM/yyyy"}}<br/>
    <b>Full Date Format:</b> My joining Date is {{joiningDate | date:"fullDate"}}<br/>
    <b>Short Time format:</b> My joining Date is {{joiningDate | date:"shortTime"}}<br/>
    <b>Medium Date format:</b> My joining Date is {{joiningDate | date:"mediumDate"}}<br/>
</div>

Output



Uppercase Pipe

Uppercase Pipe is similar to uppercase filter in AngularJS 1.x. It converts our input text into uppercase letters.

PipesExample.html

<div>
    <h4>Upper Case Pipe Example</h4>
    My name is {{name | uppercase}}!
</div>

Output



Lowercase Pipe

Lowercase Pipe is similar to lowercase filter in AngularJS 1.x. It converts our input text into lowercase.

PipesExample.html

<div>
    <h4>Lower Case Pipe Example</h4>
    My name is {{name | lowercase}}!
</div>

Output



Percentages/Number Pipe

The percent and decimal are new pipes in Angular 2. These pipes take arguments which provide information about decimal points in a digit i.e. how many integers and fraction numbers to be display in a formatted output. We need to pass the argument in format {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

PipesExample.html

<div>
    <h4>Decimals/Percentages/Number Pipe Example</h4>
    Grade : {{grade | percent:'.3'}} <br/>
    Rating : {{rating | number:'3.1-2'}}
</div>

Output



Currency Pipe

Currency pipe is similar to currency filter in AngularJS 1.x. The Angular 2 Currency pipe also accepts parameters. We can pass a currency symbol as a parameter in the Currency pipe.

PipesExample.html

<div>
    <h4>Currency Pipe Example</h4>
    <b>Euro: </b> My Laptop price is {{priceEuro | currency:'EUR':true}} <br/>
    <b>USD:</b>My Laptop price is {{priceUsd | currency:'USD':true}}
</div>

Output



Slice Pipe

Slice pipe is very similar to “limitto” filter in Angular 1.x but the order of the parameters is reversed. The first parameter of this pipe is start index and the second parameter is limit.

PipesExample.html

<div>
    <h4>Slice Pipe Example</h4>
    <b>Without Slice:</b> {{description}}<br/>
    <b>With Slice:</b>{{description | slice:0:10}}...
</div>

Output



Async Pipe

Angular 2 provides a new special pipe "Async". It allows us to bind the value of a variable directly with template which arrives asynchronously. It provides great ability for working with promises and observables.

App.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/PipesExample.html'
})
export class AppComponent {
    …
              ….

               promise: Promise;
               constructor() {
                  this.promise = new Promise(function(resolve, reject) {
                    setTimeout(function() {
                      resolve("Hello, This text showing from promise.");
                    }, 2000)
                 });
    …
              ….
  }

}

PipesExample.html

<div>
    <h4>Async Pipe Example</h4>
    {{ promise | async}}
</div>

Output



In this example, after 2 seconds delay, the text will appear from the promise.

JSON Pipe

JSON pipe is very similar to “JSON” filter in Angular 1.x. It converts the JjavaScript object to JSON string and displays that on screen.

PipesExample.html

<div>
    <h4>Json Pipe Example</h4>
    {{ testArray | json}}
</div>

Output



Conclusion

Filters in AngularJS 1.x are known as Pipes in Angular 2. There are many built-in pipes supported by Angular 2. However, some of the filters of AngularJS 1.x like "filter" and "orderby" are not supported in Angular 2, due to performance issue. Instead of these filters, we can use component code for sorting and filtering the array results.