Angular 2 - How to pass more parameters to Pipe

Pipes are very important element of Angular 2 framework. With it you can transform and filter your data. But how can you deal with it?

Lets start with a simple definition of pipe which filters data:

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

@Pipe({
    name: 'filterData',
    pure: false
})

export class FilterData implements PipeTransform {
    transform(items:any[], args:string[]):any[] {
        if (typeof items === 'object') {
            var resultArray = [];
            if (args.length === 0) {
                resultArray = items;
            }

            else {
                for (let item of items) {
                    if (item.name != null && item.name.match(new RegExp(''+args, 'i'))) {
                        resultArray.push(item);
                    }
                }
            }

            return resultArray;
        }
        else {
            return null;
        }

    }

}

This pipe will filter your data and as a filtering parameter will get an param passed as a args:string[]. So easily when you want to add text input which will be a filtering string you need to connect it with your pipe in component like this:

<input type="text" #filter (keyup)="0">

Now when you want to filter your data by string passed into input you need to get a value of #filter element like this (filter.data):

<div class="row" *ngFor="let point of (points | filterData: filter.value">

Pass a string as a parameter

To pass more parameters to your Pipe you will need to change a little your Pipe definition:

export class FilterData implements PipeTransform {
transform(items:any[], args:string[], additionl):any[] {
console.log(additionl);

So as you can see you are just passing new parameter to your Pipe. Now when you want to pass it from your template you need to add it like it is in example:

<div class="row" *ngFor="let point of (points | filterData: filter.value : 'name')">

After it you will see that passed parameter 'name' will be displayed in your console.

Pass array as a parameter

But what if you want to pass an array of elements? It is possible too! You can do this like this without changing your Pipe definition.

<div class="row" *ngFor="let point of (points | filterData: filter.value : ['all','name'])">

Pass object as a parameter

Yes you can pass an object as a parameter to your pipe. You cannot be limited in case you want to pass more than one parameter - you can pass an object of parameters too. To do that you can just do it from template of your component as it is described in code example:

<div class="row" *ngFor="let point of (points | filterData: filter.value : {name: true})">

So this can be a base to extend your pipes! You dont need to base it on one passed element!

Also about Angular:

1. State management and Side Effects (@effect) in NgRx

2. Angular 2 – Pipes (TypeError: Cannot read property ‘length’ of undefined)