Angular2 refreshing view on array push

Question

I can\'t seem to get angular2 view to be updated on an array.push function, called upon from a setInterval async operation.

the code is from this angular plunkr example

Answer 1

The above code will work properly if "numberOfTicks" is just a number, but once I change it to an array and push data, it won't update. I can't seem to understand why is that.

It is because a number is a JavaScript primitive type, and an array is a JavaScript reference type. When Angular change detection runs, it uses === to determine if a template binding has changed.

If {{numberOfTicks}} is a primitive type, === compares the current and previous values. So the values 0 and 1 are different.

If {{numberOfTicks}} is a reference type, === compares the current and previous (reference) values. So if the array reference didn't change, Angular won't detect a change. In your case, using push(), the array reference isn't changing.

If you put the following in your template instead

{{tick}}

then Angular would update the view because there is a binding to each array element, rather then just the array itself. So if a new item is push()ed, or an existing item is deleted or changed, all of these changes will be detected.

So in your chart plunker, the following should update when the contents of the from and to arrays change:

{{item}}
{{item}}

Well, it will update if each item is a primitive type.