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

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

• javascript
• angular
• angular-pipe

• did you add pipes: [ShowPipe] to the ponent where you are using the pipe? I can't see anything wrong in your code. – Günter Zöchbauer Commented Jun 15, 2016 at 6:48
• what happens if you make it an impure pipe? @Pipe({ name: 'showfilter', pure : false }) – Poul Kruijt Commented Jun 15, 2016 at 7:01
• Works as intended – Maximilian Riegler Commented Jun 15, 2016 at 7:04
• Hey I just did a quick test with your code, nothing is wrong (except not following remended practice :P). Could you check if any of your items is having "visible" === true? – Harry Ninh Commented Jun 15, 2016 at 7:06
• What do you mean by "not following remended practice"? Any concrete hints? – Günter Zöchbauer Commented Jun 15, 2016 at 7:08

2 Answers 2

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.

• It is not remended 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 
    }
}