CODEWITHSUNDEEP
angulartypescriptng-classangular-ng-class
Sebastian
Sebastian

Reputation: 4811

Efficiently apply [ngClass] expression against td

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?

Upvotes: 2

Views: 436

Answers (2)

NeNaD
NeNaD

Reputation: 20304

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.

Upvotes: 1

VENKATESH CHAVVAKULA
VENKATESH CHAVVAKULA

Reputation: 323

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
            }
        }

    })
})
  1. 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>

```

Upvotes: 0

Related Questions