Creating a Custom Pipe

Pipe’s are one of the important features of Angular. Angular comes with a stock of pre-built pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe and PercentPipe and so many. Angular allows us to create our own pipe.
The syntax for creating a pipe in command prompt.
ionic -g pipe name-of-pipe-here

The pipe is a class whose sole purpose is to use a method to transform a given value or set of value. The pipe will help us to display the in a different format without changing its value. We will create our own pipe with help of @Pipe decorator.

Screen shot of our app.

We this example we do not accept any value from the user, just for demo purpose we are using dummy data in our apps.

Step 1: ionic start CustomPipe blank –v2
Step 2: Add the following code in home.html

<ion-header> ... </ion-header>
 
<ion-content padding>
    <h4>Unformatted Value</h4>
    <ion-card>
        <ion-card-header>
            <code>User</code>
        </ion-card-header>
        <ion-card-content>
            {{ user | json }}
        </ion-card-content>
    </ion-card>
     
    <h4>Formatted Value</h4>
    <ion-list>
        <ion-item>
            <ion-label fixed>First Name</ion-label>
            <ion-note item-right>{{ user | userExtract : "firstname" }}</ion-note>
        </ion-item>
        <ion-item>
            <ion-label fixed>Last Name</ion-label>
            <ion-note item-right>{{ user | userExtract : "lastname" }}</ion-note>
        </ion-item>
        <ion-item>
            <ion-label fixed>Age</ion-label>
            <ion-note item-right>{{ user | userExtract : "age" }}</ion-note>
        </ion-item>  
    </ion-list>
</ion-content>

In angular, we convert any value to any desired format with help of angular pipe. Angular 2 detect the sign | as the pipe in the HTML or template and turns the value in front of it to an input.

Step 3: Add the following code in home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
 
export class HomePage {
    private user: any;
     
    constructor(public navCtrl: NavController) {
        this.user = {
            name: 'John Connor',
            birthyear: 1985
        }
    }
}

Step 4:Create folder ./src/utils/ and add file custom-pipe.ts in utils folder. Add the following code in custom-pipe.ts. To create a custom pipe in ionic we have to import Pipe and PipeTransform from angular/core.

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({name: 'userExtract'})
 
export class UserExtractPipe implements PipeTransform {
  
 transform(value: any, arg) : any {
    let newVal: any;
    if (arg == "firstname") {
       
      newVal = value.name ? value.name.split(' ')[0] : '';
 
    } else if (arg == "lastname") {
       
      newVal = value.name ? value.name.split(' ').splice(-1) : '';
       
    } else if (arg == "age") {
      var currentTime = new Date();
       
      newVal = value.birthyear ? currentTime.getFullYear() - value.birthyear : 0;
    }
     
    return newVal;
  }
}

 

transform(value:any, arg) is a method of Pipe class which will take two parameter first value is value from the left side of | pipe symbol, in our case is user variable from home.ts as value and arg is second argument is right side of pipe |.

Step 5: In app.module.ts we have to add reference of UserExtractPipe

import { UserExtractPipe } from ‘../utils/custom-pipe’;
We have to add the reference of pipe only in @NgModule declaration only.