Loop call while hovering cursor on top of canvas while integrating with angular 2

GoJS
1

Hi,
I am using Gojs with angular 2 application.
In that, a method is calling continuously when I hover a cursor on top of gojs canvas.

In angular 2 to bind a div color I am using getColor1() method,
< div [style.color]=“getColor1()”>Red

So, the issue is If I hover a cursor on top of gojs canvas that getColor1() method is calling continuously. I am not sure why this behavior occurring.

Pasted image1173×698 40.2 KB

// 38961 times called that method.

Pasted image716×283 18.1 KB

Because of this my application getting little hanging.

I have created on sample application on this: http://codepen.io/jothipandiyanjp/pen/dvyNMq?editors=1010
and look at the console as well as place your cursor on top of canvas.

Can you tell me why this behaviour happeing?

2

I don’t know Angular 2 (and I only know enough Angular 1 to have written our old samples/angular.html sample). However it is apparent that all of the calls are due to Angular’s change detection – trying to find state that has changed and updating accordingly. In this case it seems that there is some internal GoJS state changing that Angular is detecting.

I believe one possibility is to declare that Angular should not do its default change detection:

  selector: 'my-app',
  changeDetection: ng.core.ChangeDetectionStrategy.OnPush,
  template: . . .

But there’s probably a way to make that more specific. You might want to create a separate component just for the Diagram, so that this change detection strategy doesn’t apply to the rest of your HTML within this “my-app” component.

And I’m sure someone who actually knows Angular 2 can provide an even better way to avoid all of that automatic change detection.