Angular 2 Filter Pipe

3
votes

Trying to write a custom pipe to hide some items.

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

// Tell Angular2 we're creating a Pipe with TypeScript decorators
@Pipe({
    name: 'showfilter'
})

export class ShowPipe {
    transform(value) {
        return value.filter(item => {
            return item.visible == true;
        });
    }
}

HTML

<flights *ngFor="let item of items | showfilter">
</flights>

COMPONENT

import { ShowPipe } from '../pipes/show.pipe';

@Component({
    selector: 'results',
    templateUrl: 'app/templates/results.html',
    pipes: [PaginatePipe, ShowPipe]
})

My item has the property of visible, which can be true or false.

However nothing showing, is there something wrong with my pipe?

I think my pipe is working because when I change the pipe code to:

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

// Tell Angular2 we're creating a Pipe with TypeScript decorators
@Pipe({
    name: 'showfilter'
})

export class ShowPipe {
    transform(value) {
        return value;
    }
}

It will show all items.

Thanks

2
javascriptangularangular-pipe
did you add pipes: [ShowPipe] to the component where you are using the pipe? I can't see anything wrong in your code. – Günter Zöchbauer
what happens if you make it an impure pipe? @Pipe({ name: 'showfilter', pure : false }) – Poul Kruijt
Works as intended – rinukkusu
Hey I just did a quick test with your code, nothing is wrong (except not following recommended practice :P). Could you check if any of your items is having "visible" === true? – Harry Ninh
What do you mean by "not following recommended practice"? Any concrete hints? – Günter Zöchbauer

2 Answers

2
votes

I'm pretty sure this is because you have an initial value of [] for items. When you then later add items to items, the pipe is not reexecuted.

Adding pure: false should fix it:

@Pipe({
    name: 'showfilter',
    pure: false
})
export class ShowPipe {
    transform(value) {
        return value.filter(item => {
            return item.visible == true;
        });
    }
}

pure: false has a big performance impact. Such a pipe is called every time change detection runs, which is quite often.

A way to make a pure pipe being called is to actually change the input value.

If you do 

this.items = this.items.slice(); // create a copy of the array

every time after items was modified (added/removed) makes Angular recognize the change and re-execute the pipe.

2
votes
  • It is not recommended to use impure pipe. I will impact your performance.
  • It will be called even source has not been changed.
  • So the correct alternative to be is change the reference of your returning object.

@Pipe({
    name: 'showfilter'
})

export class ShowPipe {
    transform(value) {
        value = value.filter(item => {
            return item.visible == true;
        });
     const anotherObject = Object.assign({}, value) // or else can do cloning.
     return anotherObject 
    }
}