Understanding Ionic 2: @Pipe

Understanding Ionic 2: @Pipe

posted in: Uncategorized | 2

As discussed in Understanding Ionic 2: Classes, classes are at the center of everything thanks to ES6. These classes use a new syntax called decorators to specify what the purpose of each class is. One of these decorators, @Pipe, is a class whose sole purpose is to use a function to transform a given value or set of values.

In this article, we’ll discuss the @Pipe decorator and how to use it.

Ionic 1.0 Equivalent

@Pipe is almost a straight port of filters from Angular 1.0. The inline template syntax is almost identical and really the only difference is the processing function being wrapped in a class for @Pipe.

Basic @Pipe Syntax

The basic syntax of a @Pipe is as follows:

import {Pipe} from 'angular2/core'

@Pipe({
	name: 'myPipe'
})
export class MyPipeClass{
	transform(value, args) {
		return value;
	}
}

In the above example, name is the name you will call your @Pipe with in a template. transform is the function that will be used to process each item that is passed in from an array. args is an array of arguments optionally passed in. The inline syntax would look like the following:

value | myPipe:args[0]:args[1]

And we need to make sure we inform the @Page where we want to use our @Pipe that it exists:

import {MyPipeClass} from 'pipes/myPipe'

@Page({
	pipes: [MyPipeClass]
})
export class MyPage { }

NOTE: This is the @Pipe class name (MyPipeClass), NOT the name property from the decorator (myPipe). Also notice that we need to import the pipe into the file where we will be using it.

Example: Hello World

Lets look at a really simple example. Let’s create a @Pipe where given a name, it outputs “Hello _____!” with the passed in name.

import {Pipe} from 'angular2/core'

@Pipe({
	name: 'helloWorld'
})
export class HelloWorld {
	transform(value) {
		return "Hello " + value + "!";
	}
}

Here we are expecting to have a string passed into value. Let’s look at the @Page:

import {HelloWorld} from 'pipes/HelloWorld'

@Page({
	templateUrl: 'myPage/myPage.html',
	pipes: [HelloWorld]
})
export class MyPage {
	constructor(){
		this.name = "Andrew";
	}
}

And finally the template:

{{name | helloWorld}}

In this example, we will be passing in

Andrew

into the @Pipe and the output will be:

Hello Andrew!

Example: addInt

Let’s look at another example. Let’s create a @Pipe where given an integer or an array of integers, it will add another given integer to each value.

import {Pipe} from 'angular2/core'

@Pipe({
	name: 'addInt'
})
export class AddInt {
	transform(value, args) {
		return value + args[0];
	}
}

Here, we are expecting that we will have an integer passed into value and another integer passed into args[0]. Let’s look at the @Page:

import {AddInt} from 'pipes/AddInt'

@Page({
	templateUrl: 'myPage/myPage.html',
	pipes: [AddInt]
})
export class MyPage {
	constructor(){
		this.myIntArray = [1,3,7,15,31];
		this.mySingleInt = 40;
	}
}

And finally the template:

The meaning of life: {{mySingleInt | addInt:2}}

<ul>
<li *ngFor="#myInt of myIntArray">
{{myInt | addInt:1}}
</li>
</ul>

In this example, we are passing 2 to the first call to the @Pipe (therefore adding 40 + 2) and passing 1 to the second call to the @Pipe resulting in adding 1 to each item in the array. The output of the above would be:

The meaning of life: 42

<ul>
	<li>2</li>
	<li>4</li>
	<li>8</li>
	<li>16</li>
	<li>32</li>
</ul>

Conclusion

@Pipe classes are a great way to process a given value or set of values in your app on the fly. Questions? Leave them in the comments below!

Want More?

Want to read more and see more examples using @Pipe? Check out How to Use Pipes to Manipulate Data in Ionic 2 on Joshua Morony’s blog.

Special Thanks

Huge thanks to Brandy Carney for reviewing/editing this post!

NOTE: Beta

Please be aware that Ionic 2 is in beta and is subject to change at any time. If this post becomes inaccurate at any time, feel free to leave a comment and I’ll do my best to update it as soon as I can.

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.

2 Responses

  1. bookmark your page

  2. Could we use `Pipe` in .js or .ts files, just like `$filter` service in angular 1?

Leave a Reply