Pipes in Angular for Ionic

Definition:

• Pipes are a useful feature in Angular. 
• They are a simple way to transform values in an Angular template. There are some built-in pipes available in angular.
• You can also create own pipes.
• A pipe takes in a value or values and then returns a value.

Predefined Pipes:

Lower case pipe -

msg: String = "This example for case pipes"

{{msg | lowercase}}

Output:  this example for case pipes

---------------------------------------------------------------------------------------

Upper case pipe -

{{msg | uppercase}}

Output:  THIS EXAMPLE FOR CASE PIPES

---------------------------------------------------------------------------------------
Title case pipe -

Syntax: {{ value_expression | titlecase}}

{{msg | titlecase}}

Output:  This Example For Case Pipes

---------------------------------------------------------------------------------------

Percentage pipe -

Syntax:  {{ value | percent [ : digitsInfo [ : locale ] ] }}

per_val = 0.567

    <p>{{per_val | percent}} </p>                    

    <p>{{per_val | percent:'1.0-1'}}  </p>

    <p>{{per_val | percent:'4.0-1'}}  </p>

    <p>{{per_val | percent:'4.3-5'}}  </p>

    <p>{{ per_val | percent:'4.3-5': 'en'}}</p> 

Output: 

57%

56.7%

0,056.7%

0,056.700%

0,056.700%

---------------------------------------------------------------------------------------

Slice pipe: Slice the string or array values
Syntax: {{ value | slice : start [ : end ] }}

  listArr = ['a','b','c','d','e','f']

<ul>

  <li *ngFor="let lst of listArr | slice:2:4">

      {{lst}}

    </li>

  </ul>

Output:
  c
d

---------------------------------------------------------------------------------------
I18nselect pipe

Syntax: {{ value_expression | i18nSelect : mapping }}

Example:

  name = "mani"

  score: any = { "mani": "80%", "siva": "90%", "raj": "70%"} //Map

<div>

     {{ name | i18nSelect : score}}

</div>

Output: 80%


---------------------------------------------------------------------------------------
Json pipe:

Syntax: {{ value| json }}

Example:

  object: Object = {name: 'mani', age: '30', location: {no: 10, address: ["new street",

"city", "state", "country"]}};

<div>

    Without JSON pipe:<br />

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

    With JSON pipe:<br />

    <pre>{{object | json}}</pre>

</div>

Output:

Without JSON pipe:

[object Object]

With JSON pipe:

{
  "name": "mani",
  "age": "30",
  "location": {
    "no": 10,
    "address": [
      "new street",
      "city",
      "state",
      "country"
    ]
  }
}

DatePipe:

One of the most use full pipe in angular is date pipe.

Syntax:
{{ value | date [ : format [ : timezone [ : locale ] ] ] }}

format:
short, medium, fullDate, longDate, mediumDate, shortDate, mediumTime, shortTime

  public today : number   = Date.now();

  <p><b>Date pipe</b></p> 

  

  <p>Short format :        {{ today | date: 'short' }}</p>

  <p>Medium format :       {{ today | date: 'medium' }}</p>

  <p>Full Date format :    {{ today | date: 'fullDate' }}</p>

  <p>Long Date format :    {{ today | date: 'longDate' }}</p>

  <p>Medium Date format :  {{ today | date: 'mediumDate' }}</p>

  <p>Short Date format :   {{ today | date: 'shortDate' }}</p>

  <p>Medium Time format :  {{ today | date: 'mediumTime' }}</p>

  <p>Short Time format :   {{ today | date: 'shortTime' }}</p>

Create a custom pipe

CLI command: ionic g pipe pipes/filter-by

Syntax: ionic <generate> pipe <folder/filename>


Predefined filter pipe is not available in angular. So, here we can create a custom filter pipe for ionic and angular


https://gist.github.com/AndroidManikandan5689/ba62649d586de2be112d6d6593396821

	import { Pipe, PipeTransform } from '@angular/core';
	import * as _ from 'lodash';
	@Pipe({
	name: 'filterBy'
	})
	export class FilterByPipe implements PipeTransform {
	/**
	* @param {any[]} items
	* @param {string} searchText
	* @param {any} filterGroup
	*/
	transform(items: any[], searchText: string, filterGroup: any): any[] {
	if (!items) { return []; }
	if (!searchText) { return items; }
	searchText = searchText.toLowerCase();
	return _.filter(items, it => this.filterByOr(it, filterGroup, searchText));
	}
	/**
	* @param {any} item
	* @param {any} filterGroup
	* @param {string} searchText
	*/
	filterByOr(item: any, filterGroup: any, searchText: string) {
	let flag = false;
	for (let key of filterGroup) {
	switch (typeof item[key]) {
	case 'string': flag = this.filterByString(item, key, searchText);
	break;
	case 'number': flag = this.filterByNumber(item, key, searchText);
	break;
	case 'boolean': flag = this.filterByBoolean(item, key, searchText);
	break;
	}
	if (flag) { break; }
	}
	return flag;
	}
	/** Filter by string data type
	* @param {} item
	* @param {} key
	* @param {} searchText
	*/
	filterByString(item, key, searchText) {
	return item[key].toLowerCase().includes(searchText);
	}
	/** Filter by number data type
	* @param {} item
	* @param {} key
	* @param {} searchText
	*/
	filterByNumber(item, key, searchText) {
	return item[key] === Number.parseFloat(searchText);
	}
	/** Filter by boolean data type
	* @param {} item
	* @param {} key
	* @param {} searchText
	*/
	filterByBoolean(item, key, searchText) {
	return item[key] === (/true/i).test(searchText);
	}
	}

view raw FilterByPipe hosted with ❤ by GitHub

We need to declared the create custom pipe in expected page module

@NgModule({

  imports: [

    CommonModule,

    FormsModule,

    IonicModule,

    CountryPageRoutingModule

  ],

  declarations: [CountryPage, FilterByPipe]

})

export class CountryPageModule {}

I have create page for country list with filter pipe here

export class CountryPage implements OnInit {

  filterKey = ["name"];

  countryList : any = [{"name":"India"}, {"name":"Singapore"}, {"name":"Malaysia"}, {"name":"Canada"}, {"name":"United State"}, {"name":"United Kingdom"}, {"name":"Saudi Arabia"}, {"name":"Dubai"}];

  constructor(private location: Location) { }

  ngOnInit() {

  }

  goBack()

  {

    this.location.back();

  }

}

<ion-header>

  <ion-toolbar>

    <ion-buttons slot="start" (click)="goBack()"> <ion-button>Back</ion-button></ion-buttons>

    <ion-title>country</ion-title>

  </ion-toolbar>

  <ion-list sticky>

    <ion-searchbar placeholder="Search country" #search ></ion-searchbar>

  </ion-list>

</ion-header>

<ion-content>

<ion-item *ngFor="let country of countryList | filterBy: search.value:filterKey">

  <ion-label>{{country.name}}</ion-label>

</ion-item>

</ion-content>

Output: