Manually trigger pipe update

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.

Another 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 }

Both ways are included in stackbliz demo.

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);

I took Pengyy's solution from above and made a pipe out of it:

@Pipe({  name: 'refresh'})export class RefreshPipe implements PipeTransform {  transform(value: any, refreshValue?: any): any {    if (value == null) {      return null;    }    return JSON.parse(JSON.stringify(value));  }}

usage:

*ngFor="let key of keys | refresh:refreshCount | keys"

When a refresh is required, in the component class increment refreshCount:

this.refreshCount++

This solution keeps the logic of refreshing locally to the component and out of the data scope or other pipes scopes. Otherwise maybe using immutable objects can solve this issue in a different way.