3

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!

PeeWee2201
  • 1,464
  • 2
  • 15
  • 23

1 Answers1

6

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.

Community
  • 1
  • 1
SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
  • 1
    Thanks Siddharth for the hint to pure/impure pipes. It is working with this change. I read through this article (https://blog.angularindepth.com/the-essential-difference-between-pure-and-impure-pipes-and-why-that-matters-999818aa068) and have a better understanding of the issue. – PeeWee2201 Aug 22 '18 at 20:14