how to avoid multiple executions of a impure pipe in angular 2?

Question

Hi I am using Angular 2 pipe to return the keys of object, it is an impure pipe and It is being executed multiple times which is blocking some other script, how can I avoid multiple executions of the impure pipes? my code is as follows :

 import {Pipe,PipeTransform} from '@angular/core';
    @Pipe({ name: 'NgforObjPipe', pure: true })
    export class NgforObjPipe implements PipeTransform {
        transform(value, args:string[]):any {
        let keys = [];
        for (let key in value) {
            keys.push({key: key, value: value[key]});
        }
        console.log('pipeeeeeeeeeeeeeee', keys);
        return keys;
        }
    }

In what sense is this pipe impure? Since you are specifying `pure: true`, why do you think this is a problem? — , Jul 25 '17 at 05:38

Günter Zöchbauer · Accepted Answer · 2017-07-25T05:36:35.750

4

There is no way to prevent that. That's what an impure pipe is for.

What you can do is, to ensure that as little work is done inside the the transform() method as possible, for example by caching results and only recalculate when the passed value has actually changed.

You can also use Object.keys() to get more efficient code. See also How to iterate [object object] using *ngFor in Angular 2

ChangeDetectionStrategy.OnPush can be used to reduce the number of times change detection is run, to minimize the number of calls to the pipe.

edited Jul 25 '17 at 05:36

answered Jul 25 '17 at 05:35

Günter Zöchbauer

623,577
216
2,003
1,567

Can't `OnPush` strategy helps in this case? – Pankaj Parkar Jul 25 '17 at 05:36
Was about to add that to my answer. Yes, I think it can help. – Günter Zöchbauer Jul 25 '17 at 05:37
Thanks mate, but doing manual transformation of object inside component make more sense +1 – Pankaj Parkar Jul 25 '17 at 05:39
1

Inside the component it's easier to know when a value was changed (for example depending by an event), and therefore it's easier to reduce the number of times the code is executed to the required minimum. So yes. I agree with your conclusion. – Günter Zöchbauer Jul 25 '17 at 05:48
Thanks @GünterZöchbauer, your answer helped me in fixing it..:) – Shiva Nayak Dharavath Jul 25 '17 at 05:51
Hi Günter, could you please explain how to cache results in the Pipes for future checks? Are you suggesting keeping in global varibales. – Tapas Mukherjee Nov 08 '17 at 21:12
No need for a global variable, just a field inside the pipe. – Günter Zöchbauer Nov 09 '17 at 04:10

score 2 · Answer 2 · answered Jul 25 '17 at 05:35

2

There could be two ways of doing this.

You could consider passing this Object value as Input to component and make your component ChangeDetectionStrategy onPush.
Apply your NgforObjPipe Pipe over collection from component itself by calling its transform method manually like NgforObjPipe.tranform().

answered Jul 25 '17 at 05:35

Pankaj Parkar

134,766
23
234
299

Thanks @Pankaj Parkar, your answer helped me in fixing it..:) – Shiva Nayak Dharavath Jul 25 '17 at 05:52

how to avoid multiple executions of a impure pipe in angular 2?

2 Answers2