Efficiently apply [ngClass] expression against td

Question

I am loading a dynamic table from a JSON file and on td i am using an angular expression to evaluate the css class name based on some application logics The HTML and TS code is like below

<td *ngFor='let colData of rowData.columns'
        id="{{colData.colIndex}}"
        (click)="selectColumn(colData.colIndex)"
        [ngClass]="getColumnClassName(colData.colIndex,rowData.rowIndex)"
        name="cell">
      {{colData.cell.value}}
    </td>
    
    
    
  getColumnClassName(selectedColIndex,selectedRowIndex):string {
    var colSelected = 'cell-default';  
    if (this.selectionSettings.columnsToSelect.filter(e => e.colIndex === selectedColIndex).length > 0) {
      if (selectedRowIndex >= this.selectionSettings.startIndex ) { 
        colSelected = 'cell-selected'
      }      
    }
    return colSelected;
  }

This is working correctly.

Sometimes the JSON might contain so many records [ 1000 rows and 10 columns ] So this CSS expression will be evaluated 1000*10 times . Also chances that this list might increase

Does this approach of assign CSS classes is optimal when it comes to performance . I am feeling the UI is getting frozen at times of rendering tables with so many records How can we ensure the browser is not overloaded , but correctly assign CSS classes?

Add a new property to your elemens iterating over the the rows and columns. Some like: https://stackoverflow.com/questions/68263984/how-to-prevent-ngfor-getting-re-render-on-any-click-event/68266022#68266022. — Eliseo, Jul 09 '21 at 12:21
[ngClass]="getColumnClassName(colData.colIndex,rowData.rowIndex)" this function will calls infinity times because you are accessing function In DOM when you are scroll or click that function call multiple times thats the cause you felling frozen — VENKATESH CHAVVAKULA, Jul 09 '21 at 12:23

score 1 · Answer 1 · answered Jul 09 '21 at 12:57

This is bad practice because when you assign a value through a function, that function will be triggered on each change detection. So, if you have 1000 items, on each change detection function will be called 1000 times. That is why the UI will get frozen.

I would suggest you to implement custom pure pipe, because it will be triggered only once if the input data will not change.

score 0 · Answer 2 · answered Jul 09 '21 at 12:39

here we have to logic before Content render info view:

Example:

service.functionName().scubscribe(response => {
    this.rowData = response;
    this.rowData.columns = this.rowData.columns.map((val) => {
        val['selected'] = false
        if (this.selectionSettings.columnsToSelect.filter(e => e.colIndex === val.colIndex).length > 0) {
            if (this.rowData.rowIndex >= this.selectionSettings.startIndex) {
                val['selected'] = true
            }
        }

    })
})

In component HTML acesss ng class by following

<td *ngFor='let colData of rowData.columns'
            id="{{colData.colIndex}}"
            (click)="selectColumn(colData.colIndex)"
            [ngClass]="{'cell-selected':colData.selected,'cell-default': !colData.selected}"
            name="cell">
          {{colData.cell.value}}
</td>

```

service.functionName() ? Do i need to define a service for this? Or can i subscribe to changes inside the component ts file itself? — Sebastian, Jul 09 '21 at 13:12

Efficiently apply [ngClass] expression against td

2 Answers2