Блог

 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

                    <!--- Note that these columns can be defined in any order.
                          The actual rendered columns are set as a property on the row definition" -->
                    
                    
                    <!-- User image  -->
                    <ng-container matColumnDef="imageUrl" class="blue">
                      <th mat-header-cell *matHeaderCellDef></th>
                      <td mat-cell *matCellDef="let element"> <img class="avatar" [src]="element.imageUrl" /> </td>
                    </ng-container>

                    <!-- Position Column -->
                    <ng-container matColumnDef="position">
                      <th mat-header-cell *matHeaderCellDef> User ID </th>
                      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
                    </ng-container>
                  
                    <!-- Name Column -->
                    <ng-container matColumnDef="name">
                      <th mat-header-cell *matHeaderCellDef> Name </th>
                      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
                    </ng-container>
                  
                    <!-- Weight Column -->
                    <ng-container matColumnDef="weight">
                      <th mat-header-cell *matHeaderCellDef> Delivery Email </th>
                      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
                    </ng-container>
                  
                    <!-- Symbol Column -->
                    <ng-container matColumnDef="symbol">
                      <th mat-header-cell *matHeaderCellDef> Status </th>
                      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
                    </ng-container>
                  
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickEvent()" [class.blue]="classToggled"></tr>
                  </table>
 

 clickEvent(){
    this.showAction = !this.showAction;  
    this.classToggled = !this.classToggled; 
  } 
 

Это таблица, которую я пытался переключить, но она меняется во всех строках..
Мне нужно выделить только ту строку, на которую я нажимаю, и когда я нажимаю другую строку, она должна удалить выделение из предыдущей строки и выделить новую

Если только выделить случай элемента с одной строкой:

 <tr mat-row *matRowDef="let row; columns: displayedColumns;let index = index" (click)="clickEvent(index)" [class.blue]="index == cindex"></tr>

cindex: number
clickEvent(index) {
    this.cindex = index
}