(click) broken inside *ngFor on elements of type array if coming from a function

Question

in plnkr I\'ve reproduced a strange edge case. It probably depends on pixijs or perhaps on webgl as it happens when using pixijs.

Notice how you can click on all the

Answer 1

The problem is caused by

  ns() {
    return [[2,4],'ciao',4,true];
  }

and

<h3 *ngFor="#n of ns()"

With every event Angular invokes change detection and each time it checks whether the previously returned value from ns() is the same as the current one it turns out to be different every time, because each call to ns() returns a new array. Angular expects the model to stabilize.

Angular doesn't compare properties or the contents of objects and arrays, it only does identity checks and ns() for every call returns a new and thus different array instance.

Instead it should be

  var arr = [[2,4],'ciao',4,true]; 
  ns() {
    return this.arr;
  }

Answer 2

Interesting, you are getting infinite change loop. I happens because each time you return new array from ns() AND PIXI.autoDetectRenderer somehow triggers angular change event.

Tried to set changeDetection:ChangeDetectionStrategy.OnPush - it works. So i guess angular detects periodic changes in renderer object and starts processing changes and can not stop since every time template value != ns() method result.