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



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: