Pipes in Angular 2

Developing an Angular 1 application, filters were very useful to accomplish different needs such as filter values from an array, apply a display format to a value and so on.

In Angular 2 filters are non longer availables and the pipes take place.

Instead of filters, angular pipes are more flexible because they are able to accepts parameters as input and returning an output, and can be chained.

In this example we use a pipe to filter an array of objects.

Pipe component

We create a new pipe that will be able to filter a list of customers; in orther to do that, we need to import some stuff:

import { Pipe, PipeTransform } from "@angular/core";
import { Customer } from "./customer.model";

Now we define the Pipe component attributes:

@Pipe({
name: "searchCustomers",
pure: false
})

We defined the pipe selector and a pure attribute to false.

This because we have two types of pipes, pure and impure; a pure pipe is more efficient and fast but is able to detect changes only for primitive values (string, numbers..) or a changed object reference.

Instead, impure pipes can detect any component change; in our case we’ll have an array of customers as input, so we need an impure pipe.

Because the nature of impure pipes, you need to use these components with great care; if you notice a degrade of the performance of the application, it’s possibile to substitute the pipe with a custom component that will do the same work.

This is the code of the pipe:

export class SearchCustomersPipe implements PipeTransform {
transform(customers: Customer[], searchText: string): Customer[] {
let filteredCustomers: Customer[] = new Array<Customer>();

if (customers != undefined) {
filteredCustomers = customers.filter(c => (c.Name.indexOf(searchText) != -1) || (c.Address.indexOf(searchText) != -1));
}

return filteredCustomers;
}
}

The pipe implement the PipeTransform interface and the transform method, that accept two parameter, an array of customers and the text to search as well.

Obviously the method returns the filtered array.

The last step is register the pipe in the application module:

.....

import { SearchCustomersPipe } from "./searchCustomers.pipe";

.....

@NgModule ({

.....
declarations: [
SearchCustomersPipe
]

.....
})

Now the pipe is available to be used in the view.

Customer component

In the view we should have a list of the customers, and we want to filter that typing in a search text field.

The view will look like this:

<table class="table table-striped">
<thead>
<tr>
<th>
{{ "NAME" | translate }}</th>
<th>
{{ "ADDRESS" | translate }}</th>
<th>
{{ "CITY" | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let customer of (customers | searchCustomers: searchText)">
<td>
{{customer.Name}}</td>
<td>
{{customer.Address}}</td>
<td>
{{customer.City.Name}}</td>
</tr>
</tbody>
</table>

We apply the searchCustomers pipe to a customers array (first parameter accepted by the pipe) and after the colon we pass the second parameter searchText.

Here the full Angular2 project.