Creating a Filter Pipe for Angular 2 (in Ionic 2)

Players organized by team in <ion-list>

I’ve been getting into the world of building cross-platform mobile apps using the Ionic 2 Framework with Angular 2 for Typescript. Yesterday I needed to build a view that displayed a list of players that were grouped by the team that they’re on. The final view is shown here on the right.

The solution was to create a custom pipe. Pipes are a way to transform data within templates specifically for the purpose of presentation.

Filtering a List of Objects

To start out, the layout displayed a list of Player objects. The raw list looks something like this:

[
    {
        "firstName": "Morgan",
        "lastName": "Benton",
        "username": "mbenton",
        "teamId": 1
    },
    {
        "firstName": "Kelsey",
        "lastName": "Banks",
        "username": "kbanks",
        "teamId": 1
    },
    {
        "firstName": "Jessica",
        "lastName": "Martinez",
        "username": "jmartinez",
        "teamId": 3
    },
    {
        "firstName": "Maggie",
        "lastName": "Walker",
        "username": "mwalker",
        "teamId": 2
    }
]

The template code for displaying this list without filtering would look something like this:

<ion-content>
    <ion-list>
        <ion-item *ngFor="let player of players">
            {{player.firstName}} {{player.lastName}}
        </ion-item>
    </ion-list>
</ion-content>

However, we’d like to group these players by what team they’re on. The list of teams looks like this:

[
    {
        "id": 1,
        "name": "JMU"
    },
    {
        "id": 2,
        "name": "University of Richmond"
    },
    {
        "id": 3,
        "name": "UVA"
    }
]

In order to get what we want, we have to create a custom pipe.

Creating a Custom Pipe

The pipe code looks like this:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
    name: "filter",
    pure: false
})
export class ArrayFilterPipe implements PipeTransform {

    transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> {
        return items.filter(item => {
            for (let field in conditions) {
                if (item[field] !== conditions[field]) {
                    return false;
                }
            }
            return true;
        });
    }
}

The first parameter to this pipe is the list of objects to be filtered, e.g. players. The second parameter is an object specifying the filter conditions. Each key in the list of conditions should match a key from the target object type. To use this filter in your view you need to add the pipe to your Component as follows:

import { Component } from "@angular/core";
import { NavController, Loading } from "ionic-angular";
import { Player } from "../../models/player";
import { Team } from "../../models/team";
import { ArrayFilterPipe } from "../../pipes/array-filter.pipe";

@Component({
    templateUrl: "build/pages/players/players.html",
    pipes: [ArrayFilterPipe]
})
export class PlayersPage {

    players: Array<Player>;
    teams: Array<Team>;

    /* ... rest of component implementation ... */
}

Note that this Component has two public properties (players and teams) that are populated in the constructor() so that the lists will be available to the view. The key lines here are line 5, where the filter pipe is imported, and line 9, where we tell the Component that we plan to use this pipe. Once we’ve done this, we can use the pipe in our view like this:

<ion-item-group *ngFor="let team of teams">
    <ion-item-divider>{{team.name}}</ion-item-divider>
    <ion-item *ngFor="let player of players | filter:{teamId:team.id}">
        {{player.firstName}} {{player.lastName}}
    </ion-item>
</ion-item-group>

If you wanted to filter for more than one property value, you could change the value passed to the filter to be something like: {teamId: team.id, firstName: 'Morgan'}, which would return only members of teams with the first name Morgan (I know this is silly, but I hope you see the point).

Improvements?

As you can see, the values that are filtered for can be dynamic, e.g. a team ID that changes as teams are looped through. An improvement might be to update the pipe to allow other types of search expressions, e.g. return players with first names that start with “M”. At any rate, I was very pleased by how clean and elegant this ended up being. Happy filtering!