Manually trigger pipe update

Question

I have created a pipe to be able to use *ngFor with objects. However, when the object is updated, the pipe does not update. I have found a solution here by using stateful pipe with pure: false.

This solution is not acceptable in terms of performance for my use case as it will refresh the pipe for each change (I use this pipe almost everywhere to render complex elements).

Is there a way to trigger a manual refresh of the pipe so it refreshes only when I want?

Here is a plunker - to see the problem try to remove a name by clicking a - button. If you add pure:false you will see that it will work:

@Pipe({name: 'keys', pure: false})
export class Keys implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

What I would like is to add something to my delName() function so it updates the pipe...

Solution 1

First way: paremeter

One way to make a Pure Pipe becoming impure is add a parameter to your Pipe.

when you want to refresh, just change the parameter.

---

Second way: without parameter

Pure Pipe will be fired when its input has a new instance. So with TypeScript 2.1+, the below code will copy the original object with a new instance, and lead pure pipe to be fired.

    let copy = { ...original }

Negative impact

This will force your component to refresh your pipe every time a variable changes his value, even if this isn't the one used within the pipe contains

---

Stackblitz

Both ways are included in stackbliz demo.

Solution 2

A pure pipe with an object for input will only emit an update if the object's reference changes.

If you can find a way for the object to be replaced with a new instance when part of its structure changes, a pure pipe will automatically update its output as needed.

Assuming your existing delName function just removes one element from the existing structure:

this.elements.remove(0);

you can update it by replacing this.elements with a new version:

this.elements = this.elements.splice(1);

Solution 3

Create a pipe, here are two way to solve it:

1, but this way will be trigger for many times, which is bad for your website.

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

2.Using ngModel + pure pipe

    <input 
                style="position: absolute;
                z-index: -1;"
                [(ngModel)]="detectedChangeRef">
this.detectedChangeRef = Math.random();

your html, because pipe would notice your ref's change, it would trigger your pipe:

   *ngFor="let item1 of item | tablepipe:detectedChangeRef;">

Your pipe

     transform(value,detectedChangeRef) {
    console.log(detectedChangeRef);
     // do sth..
}