CODEWITHSUNDEEP
angularangular-pipeangular2-changedetection
PeeWee2201
PeeWee2201

Reputation: 1524

Angular change detection with pipe

I have an issue with change detection and pipe. I could not find a good way to work around it.

I have created a small project to reproduce it here. Go to the /monitor route.

When you click on the on Change button, it changes the value of the first item in the array but the UI is not updated.

It works if I recreate another object in the change handler with

this.state[0] = Object.assign({}, this.state[0], { value: 999.99 });

But I don't want to do that. I need to keep the same object reference.

The issue comes from the pipe in vital-value.component.html

{{ _vitalValue | vitalFormat }}

It works if I use instead

{{ _vitalValue.value }}

Is there a way to keep the pipe but to make the refresh happen?

Thanks!

Upvotes: 3

Views: 6703

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

Although this is not recommended, try making the pipe impure.

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

But beware of the consequences to your App's performance. It's not really recommended to use impure pipes.

Read through here:

Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.

With that concern in mind, implement an impure pipe with great care. An expensive, long-running pipe could destroy the user experience.

Upvotes: 6

Related Questions