Improving performance of large Angular applications

Angular performance can degrade when an app embedding the yFiles component (or any other component) has a performance-intensive update check. This often means the app contains many components. Angular integrates with every event listener, setTimeout, requestAnimationFrame, and setInterval. After the code in these listeners or callbacks runs, Angular triggers change detection. If change detection is costly and these events are frequent (especially mouse move events), the application slows down.

To disable change detection, the GraphComponent can be run "outside of Angular" like this:

constructor(private zone:NgZone) {}

ngAfterViewInit() {
  // instantiate a new GraphComponent
  this.zone.runOutsideAngular(args => {
    const graphComponent = this.graphComponent = new GraphComponent(this.graphComponentRef.nativeElement);
    ...
  }
}

However, running the GraphComponent outside Angular means you must explicitly notify Angular of events in the yFiles component that should trigger Angular functionality (like item-clicked, node-created, etc.). You can do this in a couple of ways. Here's one:

mode.addEventListener("item-clicked", (evt, sender) => {
  this.zone.run(() => {
    //do stuff
  }
})

Here's another:

mode.addEventListener("item-clicked", (evt, sender) => {
   // do stuff
   this.ref.markForCheck()
})

Running the Layout Animation Outside of Angular

Running an animated layout "inside Angular" can also significantly slow down the application. Layout animation involves enabling the WaitInputMode, which adds and removes listeners. These listener changes can unnecessarily trigger Angular's change detection. Therefore, we recommend running the layout animation "outside of Angular" as well:

this._zone.runOutsideAngular(() => {
 runLayout(this.graphComponent)
})