Improving performance of large Angular applications



Disabling Angular change detection for selected components can increase the overall application performance
For a better user experience, please go to the integrated documentation viewer to read this article.


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 => {
    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) => { => {
    //do stuff

or like this:

mode.addItemClickedListener((sender, evt) => {
   // do stuff

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(() => {

Categories this article belongs to:
yFiles for HTML > Other
Applies to:
yFiles for HTML: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6
Angular - performance