Improving performance of large Angular applications

Angular performance will go down when the app that embeds the yFiles component (or any other component for that matter) contains a performance intensive updateCheck, meaning mostly that there are many components in the app. This is because angular taps into every event listener, setTimeout, requestAnimationFrame, and setInterval, basically any code that runs and after that code has run, it will run the change detection. If the change detection is costly, this slows down the application if there are a lot of these events being called. This is the case especially with mouse move events and similar.

In order 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, this means Angular needs to be explicitly notified of events in the yFiles component that should trigger Angular functionality (like itemClicked, nodeCreated, etc). This may be done like so:

mode.addItemClickedListener((sender, evt) => {
  this.zone.run(() => {
    //do stuff
  }
)

or like this:

mode.addItemClickedListener((sender, evt) => {
   // do stuff
   this.ref.markForCheck()
})

Running the Layout Animation Outside of Angular

Running an animated layout "inside Angular" can also severely slow down the application. This is because the layout animation involves enabling the WaitInputMode, which removes and add listeners that will unnecessarily trigger Angular's change detection. Therefore, we recommend running the layout animation "outside of Angular" as well:

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