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

Running NPM module via Cordova

Error in React-router: Unable to assign value to the 'props' property as it is undefined

Innovative and interactive animated data display

Contrasting the provision of ComponentStore directly versus utilizing provideComponentStore in Angular standalone components

To access the value of a DOM input in an Angular component, utilize the "renderer/renderer2" method

Unable to add data to an Array once subscribed to BehaviorSubject

Struggling with getting render props to work in Next.js version 13

Exploring Next.js with getStaticPaths for multi-language support

Encountered an unexpected symbol < in JSON while implementing fetch() operation

Event triggered when a Socket.IO connection is disconnected

Guide on utilizing TypeScript declarations imported as `* as`

A guide on mapping an array and removing the associated element

Exploring the depths: Retrieving nested object attributes using ngFor

An alternative method for storing data in HTML that is more effective than using hidden fields

Using Jquery to dynamically add an active class to a link if it matches the current URL

Utilize DataTables with a custom search form for enhanced data filtering

Using API calls to update component state in React-Redux

The Angular Validator Pattern may be effective in HTML, but it seems to encounter limitations when

Show a Toast in React without relying on useEffect to manage the state

Anticipating the outcome of various observables within a loop