How can I assign different colors to disabled columns in Mat-Table?

Question

i have disabled several columns in my table and want to display them in different colors. Therefore I wrote a function in Typescript where CSS is changed via the class .disabledRange. I have read that you can solve it with [ngClass]... I have an array with three columns: first, second, third. How can I leave the columns disabled and still style them in different colors? In my case I don't know how to use it in the most useful way. I would be grateful for help :)

My code:

// Template
<td mat-cell *matCellDef [class.disabledRange]="column.disabledRange">
...
</td>

// Array
private displayedColumns: EditColumns[] = [
    { attribute: 'first', name: 'MyFirstCol', object: null, disabledRange: false },
    { attribute: 'second', name: 'MySecondCol', object: null, disabledRange: false },
    { attribute: 'third', name: 'MyThirdCol', object: null, disabledRange: false }

  ];

// Set columns disabled
  private disabledColumns(attributeName: string) {
    if (attributeName) {
      const displayedColumn = this.displayedColumns.find((c) => c.attribute === first);
      if (displayedColumn) {
        displayedColumn.disabledRange = !displayedColumn.disabledRange;
        const columnIndex = this.columns.findIndex((c) => c === attributeName);

      }
    }

ngAfterViewInit() {
    // To disabled columns   
    this.disabledColumns('first');
    this.disabledColumns('second');
    this.disabledColumns('third');
  }

// Style
// When ranges are disabled in the data table
.disabledRange {
  background-color: #eae9e9;
  color: #000000;
}

Answer 1

you can use together [class.disabledRange]="condition" and [ngClass], e.g. if you has some like

.col0,.col1,.col2,.col3
{
  padding-left: .5rem
}
.col0
{
  background-color: silver
}
.col1
{
  background-color: yellow
}
.col2
{
  background-color: red;
  color:white;
}

You can use

<ng-container *ngFor="let col of defColumns;let i=index" [matColumnDef]="col.name">
    <th mat-header-cell *matHeaderCellDef [class.disabledRange]="col.disabledRange" [ngClass]="'col'+i">{{col.attribute}}  </th>
    <td mat-cell *matCellDef="let element" [class.disabledRange]="col.disabledRange" [ngClass]="'col'+i"  > {{element[col.name]}} </td>
  </ng-container>

See, stackblitz, for more about ngClass see the docs

Updated if we can change the "class" of the rows we can use the tag "tr mat-row.

Imagine some data like:

[
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H',class:"col0"},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He',class:"col1"},
]

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="row.class"></tr>

Of course we can also changing the td., we need use "some variable of the row". We can has a property of our "data",

You can write

<td mat-cell *matCellDef="let element"
   [class.disabledRange]="col.disabledRange" 
   [ngClass]="element.class"> {{element[col.name]}} </td>

We can also use the "index of the row", e.g.

<!--see the "let row=index"-->
<td mat-cell *matCellDef="let element;let row=index" 
    [class.disabledRange]="col.disabledRange" 
    [ngClass]="'col'+(row%4)"  > {{element[col.name]}} </td>

NOTE: If only want to change the background, we can use

  [style.background-color]="....."