0

I have a angular material table:

  <ng-container matColumnDef="index">
    <th mat-header-cell *matHeaderCellDef>Index</th>
    <td mat-cell *matCellDef="let element"> {{element.index}} </td>
  </ng-container>

  <ng-container matColumnDef="time">
    <th mat-header-cell *matHeaderCellDef>Time</th>
    <td mat-cell *matCellDef="let element"> {{element.Time}} </td>
  </ng-container>

  <ng-container *ngFor="let quantity of quantities" >
    <ng-container [matColumnDef]="quantity.name">
      <th mat-header-cell *matHeaderCellDef>{{quantity.name}}</th>
      <td mat-cell *matCellDef="let element"> {{element[quantity.name]}} </td>
    </ng-container>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="columns; sticky:true"></tr>
  <tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>

and I want to highlight specific line when I click a button in my screen. I tried to find a solution on the web and I didn't find any way to do that. If that possible?

Thank you very much for your help and have a nice day,

Amit.

Amit
  • 3
  • 3
  • Does this answer your question? [Angular 4 Material table highlight a row](https://stackoverflow.com/questions/45417248/angular-4-material-table-highlight-a-row) – Shalom Peles Jan 21 '21 at 11:13

1 Answers1

0

Do something like this:

<tr mat-row *matRowDef="let row; columns: columns;" [class.highlight]="row.field===specificLine"></tr>

And in the component's style flie:

tr.highlight { background-color: red; }
Shalom Peles
  • 2,285
  • 8
  • 21
  • Thanks for your answer! But I want from JS code to change the td class of specific row (for example the 'row {i}'. That is possible? – Amit Jan 21 '21 at 17:20