Angular2 ngFor OnPush Change Detection with Array Mutations

Question

I have a data table component ( angular2-data-table ) project where we changed the project from Angular's traditional change detection to OnPush for optimized rendering speeds.

Once the new change detection strategy was implemented, a bug was filed referencing the table is not updating when the data object is mutated such as object's property updates Reference: https://github.com/swimlane/angular2-data-table/issues/255. A strong use case can be made for this type of need for things such as inline editing or external data changes to a single property in a large data collection like a stock ticker.

In an effort to resolve the issue, we added a custom trackBy property checker called trackByProp. Reference: commit. Unfortunately, this solution did not resolve the matter.

On the demo page under live reloading you can see the demo referenced in the above commit running but not updating the table until you click thus triggering change detection.

The structure of the component is something like:

Table > Body > Row Group > Row > Cell

all of these components implementOnPush. I'm using getters/setters in the row setter to trigger page recalculations like shown here.

We'd like to stay with the OnPushchange detection for those implementing this pattern, however, as a open-source project with multiple consumers one could argue some sort of custom checking function for the visible row values on the screen.

All that said, trackBy is not triggering change detection in row cell values, what is the best way to accomplish this?

Fidelity

The question should include the code that allows to reproduce the problem. – Stopple

Answer 1

Angular2 change detection doesn't check the contents of arrays or object.

A hacky workaround is to just create a copy of the array after mutation

this.myArray.push(newItem);
this.myArray = this.myArray.slice();

This way this.myArray refers a different array instance and Angular will recognize the change.

Another approach is to use an IterableDiffer (for arrays) or KeyValueDiffer (for objects)

// inject a differ implementation 
constructor(differs: KeyValueDiffers) {
  // store the initial value to compare with
  this.differ = differs.find({}).create(null);
}

@Input() data: any;

ngDoCheck() {
  var changes = this.differ.diff(this.data); // check for changes
  if (changes && this.initialized) {
    // do something if changes were found
  }
}

See also https://github.com/angular/angular/blob/14ee75924b6ae770115f7f260d720efa8bfb576a/modules/%40angular/common/src/directives/ng_class.ts#L122

Hamill

ngDoCheck isn't running until I invoke an event like click. Also, I noticed that *ngFor has custom tracking already in it, why wouldn't this detect it? github.com/angular/angular/blob/master/modules/%40angular/… – Fidelity

I was also investigating using Rx for this like: #32683988 – Fidelity

As mentioned above, the question should provide enough information to be able to reproduce. My answer was just a shoot from the hip. A Plunker to reproduce would be helpful. Perhaps it's a zone issue. – Stopple

Ya, I'll throw up a plunkr here in a few hrs :) – Fidelity

the hacky workaround saved me ! thx you! EDIT : it works also this.myArray = this.myArray – Pentstemon

@AshishSharma why do you think so? A different copy is only assigned if it actually changed. You can also make your app smarter about changes to not have to compare every time which can become slow with big data structures. – Stopple

Answer 2

You might want to use markForCheck method from ChangeDetectorRef.

---

I do have a similar issue, where I do have a component that contains a lot of data and re-check them all on every change detection cycle is not an option. But as we watch some properties from URL and we change things in the view accordingly, with onPush our view is not refreshed (automatically).

So in your constructor, use DI to get an instance of changeDetectorRef : constructor(private changeDetectorRef: ChangeDetectorRef)

And wherever you need to trigger a changeDetection : this.changeDetectorRef.markForCheck();

Fulsome

I tried this in the parent page and had no results. Perhaps it needs to be done at the component level thats rendering them but at that point I don't know anything changed :S – Fidelity

I suppose some sort of custom api to modify the property could do this? But thats not very nice from API perspective. – Fidelity

Answer 3

I too faced the similar issue where to optimize my app performance, I had to use the changeDetection.OnPush strategy. So I injected it in both my parent component as well as my child component's constructor , the instance of changeDetectorRef

    export class Parentcomponent{
       prop1;

       constructor(private _cd : ChangeDetectorRef){
          }
       makeXHRCall(){
        prop1 = ....something new value with new reference;
        this._cd.markForCheck(); // To force angular to trigger its change detection now
       }
    }

Similarly in child component, injected the instance of changeDetectorRef

    export class ChildComponent{
     @Input myData: myData[];
     constructor(private _cd : ChangeDetectorRef){
          }
       changeInputVal(){
        this.myData = ....something new value with new reference;
        this._cd.markForCheck(); // To force angular to trigger its change detection now
       }
    }

Angular change Detection is triggered on every asynchronous function :-

• any DOM event like click,submit, mouseover.
• any XHR call
• any Timers like setTimeout(), etc.

So, this kind of slows down the app because even when we are dragging the mouse, angular was triggering changeDetection. For a complex app spanning over multiple components, this could be a major performance bottleneck since angular has this tree kind of parent to child change detection strategy. To avoid, this it is better we use the OnPush strategy and forcefully trigger angular's change detection where we see there is a reference change.

Secondly, in OnPush strategy, one should be very careful that it will only trigger change when there is a change in object reference and not just the object property value i.e in Angular change” means “new reference”.

For eg:-

    obj = { a:'value1', b:'value2'}'
    obj.a = value3;

The property value of 'a' in 'obj' might have change but obj still points to the same reference, so Angular change detection will not trigger here (unless you force it to); To create a new reference , need to clone the object into another object and assign its properties accordingly.

for further understanding, read about Immmutable Data structures, change Detection here

Destined

Answer 4

Late Answer but another workaround is by using the spread operator after mutation.. myArr = [...myArr] or myObj = {...myObj}

This can even be done while mutating: myArr = myMutatingArr([...myArr]) since the parameter is taken as a new reference of an Array, making the variable take a new reference, and therefore the Angular check is called.

As mentioned, if you change the reference, the check will be made, the spread operator can be used in any case to do exactly that.

Be wary though that nested structures of data inside structures of data require the reference change up to the nested level. You would have to do an iteration that returns a spread inside spread, as such:

myObj = {...myObj, propToChange: { ...myObj.propToChange,
        nestedPropArr: [ ...myObj.propToChange.nestedPropArr ]
    }
}

which might become complicated if you need iteration over objects and such. Hope this helps someone!

Morry