The Angular performance may be impacted by the constant recalculation of ngStyle when clicking on various input fields

Question

The Angular performance may be impacted by the constant recalculation of ngStyle when clicking on various input fields

I am facing a frustrating performance issue.

Within my component, I have implemented ngStyle and I would rather not rewrite it. However, every time I interact with random input fields on the same page (even from another component), the ngStyle recalculates slowly.

For example, I want to create a table displaying the product of two numbers with dynamic background colors:

<section>
  <div class="row" 
       *ngFor="let row of rows">
    <div class="col" 
         [ngStyle]="{'background-color': getBG(row*col)}" 
         *ngFor="let col of cols ">
      {{row * col}}
    </div>
  </div>
</section>

However, when I add several input fields to the page:

<section>
  <input type="text" [ngModel]="model1"/>
  <input type="text"[ngModel]="model2"/>
  <input type="text"[ngModel]="model3"/>
  <input type="text"[ngModel]="model4"/>
  <input type="text"[ngModel]="model5"/>
</section>

Each click on these inputs triggers a call to getBG(), resulting in sluggish performance. This is evident even if the function simply returns a string without any complex calculations.

To see this issue in action, check out the Example at StackBlitz. Open the console and try clicking swiftly among different input fields or entering values - the responsiveness is notably lacking.

UPD1: My scenario involves a more intricate setup, and I already employ ChangeDetectionStrategy.OnPush. Even binding ngStyle directly to a value instead of a function does not significantly improve performance, as it remains slow and introduces complexity. Ideally, I seek a way to instruct ngStyle not to recalculate unless explicitly requested. Perhaps leveraging ChangeDetectorRef.detach() could provide some assistance.

javascript angular typescript

Answer 1

Answer №1

It all adds up perfectly. This is the method by which Angular conducts change detection. Additionally, Angular executes extra checks when a function is invoked within one of the data-binding syntaxes, like so:

[ngStyle]="{'background-color': getBG(row*col)}"

Angular carries out Change Detection in three scenarios:

DOM Events.
AJAX Calls.
Timeouts / Intervals.

This specific scenario involves DOM Events (click).

During Change Detection, Angular examines whether a certain variable in the Component has been altered.

This process is straightforward for properties but not as simple with functions.

The only way to determine if a function's value has changed is by calling it.

Hence, Angular performs this action.

SOLUTION:

To resolve this issue, establish a matrix in the Component Class that specifies the number to display and the color to use:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  rows = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  cols = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  matrix = [];

  model1 = '';
  model2 = '';
  model3 = '';
  model4 = '';
  model5 = '';

  ngOnInit() {
    this.rows.forEach((row, rowIndex) => {
      this.matrix.push([]);
      this.cols.forEach((col, colIndex) => {
        const product = row * col;
        this.matrix[row].push({
          numberToShow: product,
          color: this.getBG(product),
        });
      })
    });
  }

  getBG(hue: number): string {
    console.log('getBG was called');
    return 'hsl(' + hue + ', 100%, 50%)';
  }

}

Then, incorporate it into your template:

<br/>
<div> 1. Open a console</div>
<br/>

<section>
    <div class="row" *ngFor="let row of matrix">
        <div 
      class="col" 
      [style.background-color]="col.color" 
      *ngFor="let col of row ">
            {{col.numberToShow}}
        </div>
    </div>
</section>

<br/>
<div>2. Click fast on the different inputs: </div>
<br/>

<section>
    <input type="text" [ngModel]="model1"/>
  <input type="text"[ngModel]="model2"/>
  <input type="text"[ngModel]="model3"/>
  <input type="text"[ngModel]="model4"/>
  <input type="text"[ngModel]="model5"/>
</section>

Difference in the performance:

In the previous setup, getBG was triggered 401 times upon initialization.

However, with the new implementation, getBG is only called 101 times during initialization.

This results in a significant performance enhancement of approximately 397%.

Besides, there are no additional calls to the getBG method when the user interacts with input fields.

Feel free to explore a Live Example on StackBlitz. It could be beneficial for reference.

You may also wish to peruse my Medium Article about Improving Performance of Reactive Forms in Angular. While centered on Reactive Forms, the article covers related aspects as well. I trust you will find it valuable.

Answer 2

It all adds up perfectly. This is the method by which Angular conducts change detection. Additionally, Angular executes extra checks when a function is invoked within one of the data-binding syntaxes, like so:

[ngStyle]="{'background-color': getBG(row*col)}"

Angular carries out Change Detection in three scenarios:

DOM Events.
AJAX Calls.
Timeouts / Intervals.

This specific scenario involves DOM Events (click).

During Change Detection, Angular examines whether a certain variable in the Component has been altered.

This process is straightforward for properties but not as simple with functions.

The only way to determine if a function's value has changed is by calling it.

Hence, Angular performs this action.

SOLUTION:

To resolve this issue, establish a matrix in the Component Class that specifies the number to display and the color to use:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  rows = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  cols = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  matrix = [];

  model1 = '';
  model2 = '';
  model3 = '';
  model4 = '';
  model5 = '';

  ngOnInit() {
    this.rows.forEach((row, rowIndex) => {
      this.matrix.push([]);
      this.cols.forEach((col, colIndex) => {
        const product = row * col;
        this.matrix[row].push({
          numberToShow: product,
          color: this.getBG(product),
        });
      })
    });
  }

  getBG(hue: number): string {
    console.log('getBG was called');
    return 'hsl(' + hue + ', 100%, 50%)';
  }

}

Then, incorporate it into your template:

<br/>
<div> 1. Open a console</div>
<br/>

<section>
    <div class="row" *ngFor="let row of matrix">
        <div 
      class="col" 
      [style.background-color]="col.color" 
      *ngFor="let col of row ">
            {{col.numberToShow}}
        </div>
    </div>
</section>

<br/>
<div>2. Click fast on the different inputs: </div>
<br/>

<section>
    <input type="text" [ngModel]="model1"/>
  <input type="text"[ngModel]="model2"/>
  <input type="text"[ngModel]="model3"/>
  <input type="text"[ngModel]="model4"/>
  <input type="text"[ngModel]="model5"/>
</section>

Difference in the performance:

In the previous setup, getBG was triggered 401 times upon initialization.

However, with the new implementation, getBG is only called 101 times during initialization.

This results in a significant performance enhancement of approximately 397%.

Besides, there are no additional calls to the getBG method when the user interacts with input fields.

Feel free to explore a Live Example on StackBlitz. It could be beneficial for reference.

You may also wish to peruse my Medium Article about Improving Performance of Reactive Forms in Angular. While centered on Reactive Forms, the article covers related aspects as well. I trust you will find it valuable.

Answer 3

Answer №2

Two key factors contribute to the slow detection process. Firstly, the sluggishness of development tools and the excessive printing of messages can further delay the process.

Secondly, unnecessary work is being done which hinders efficiency. By segregating tasks into distinct parts, it becomes feasible to switch the changeDetection strategy to OnPush.

To illustrate this concept, consider the following simplified example:

@Component({
    selector: 'my-cell',
    template: '<div [ngStyle]="styles"><ng-content></ng-content></div>',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CellComponent {
    @Input() styles: {
    readonly "background-color": string;
  };
}

and

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // Implementation details...
}

// Additional code snippets...

The OnPush detection strategy ensures that any changes in the @Inputs of a Component/Directive will trigger detection. By separating resource-intensive tasks into separate directives and ensuring that their @Inputs only change when necessary, optimal performance can be achieved.

Explore the provided StackBlitz for a live example: https://stackblitz.com/edit/style-performance-of-a-grid-fzbzkz

Answer 4

Two key factors contribute to the slow detection process. Firstly, the sluggishness of development tools and the excessive printing of messages can further delay the process.

Secondly, unnecessary work is being done which hinders efficiency. By segregating tasks into distinct parts, it becomes feasible to switch the changeDetection strategy to OnPush.

To illustrate this concept, consider the following simplified example:

@Component({
    selector: 'my-cell',
    template: '<div [ngStyle]="styles"><ng-content></ng-content></div>',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CellComponent {
    @Input() styles: {
    readonly "background-color": string;
  };
}

and

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // Implementation details...
}

// Additional code snippets...

The OnPush detection strategy ensures that any changes in the @Inputs of a Component/Directive will trigger detection. By separating resource-intensive tasks into separate directives and ensuring that their @Inputs only change when necessary, optimal performance can be achieved.

Explore the provided StackBlitz for a live example: https://stackblitz.com/edit/style-performance-of-a-grid-fzbzkz

The Angular performance may be impacted by the constant recalculation of ngStyle when clicking on various input fields

Answer №1

SOLUTION:

Difference in the performance:

Answer №2

Similar questions

Utilize a function as a parameter

Best method for removing CrosshairMove event listener in lightweight charts

Typescript is facing an issue locating the declaration file

Changing the background color of the canvas using Javascript

Troubleshooting problem with Shopify mailto tag

Improprove the performance of an array of objects using JavaScript

Runtime Error: Invalid source property detected - Firebase and Next.js collaboration issue

PHP data is not displayed by Ajax

Looping through an object with AngularJS's ng-repeat

Unable to utilize jQuery's .append(data) function due to the need to use .val(append(data)) instead

Having trouble retrieving input field values with Angular.js

"Unleash the Power of Go HTTP Server for React, Angular, and

When logging off from an Angular2 application, the OIDC-client does not properly clear the cookies for the MVC application

Can the name of the ngx-datatable-column be altered?

Issue encountered: Cannot locate module: Error message - Unable to find 'stream' in 'C:devjszip-test ode_modulesjsziplib' folder

Encountering difficulties in generating a binary from a nodejs application with pkg

Programmatically switch between show and hide using Angular Material

Exploring Angular: How to Access HTTP Headers and Form Data from POST Request

When toggling visibility with JS, the Bootstrap Grid Row may not center-align as expected

Troublesome glitches in jQuery?