Способ изменения стиля выбранного «тд» в таблице угловых материалов

Question

Я пытаюсь изменить стиль "td" в таблице угловых материалов, когда она нажата.Стиль - это что-то вроде цвета фона, отступов, что-то в этом роде.

Я пробовал включить (щелкнуть) элемент 'td'.Но это не работает.

<table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <td mat-cell *matCellDef="let element" class="userlist" (click)="this.style.backgroundColor = 'red';"><span><strong>{{element.name}}</strong></span> <br/>
         </td>
      </ng-container>

      <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
    </table>

Answer 1

Добавьте tabindex="1" к mat-cell

<mat-cell tabindex="1" *matCellDef="let element">
                    {{element[column.name]}}
                </mat-cell>

Теперь стили кликов можно увидеть, используя следующие символы:

mat-row.mat-row.ng-star-inserted mat-cell:active,
mat-row.mat-row.ng-star-inserted mat-cell:focus {
  background: tomato;
  color: white;
}

Демонстрация Stackblitz, показывающая изменение цвета тд при нажатии

Answer 2

Чтобы изменить стиль mat-row, вам необходимо переопределить .mat-row в глобальном style.css, как показано ниже.

.basic-container .mat-row  {
  background-color: yellow;
  padding:5px;
 /* add more style to customize */
}

Вот решение по стеку

Надеюсь, это поможет!