Как добавить «выделение» в строку при клике - угловой 8
У меня есть эта таблица:
<ng-container *ngIf="videos$ | async as videos">
<mat-table [dataSource]="videos" *ngIf="videos.length">
<ng-container matColumnDef="play">
<mat-header-cell *matHeaderCellDef trans>Play</mat-header-cell>
<mat-cell *matCellDef="let video">
<button mat-flat-button class="mat-flat-button mat-accent ng-star-inserted" color="accent" (click)="playVideo(video)">
<mat-icon [svgIcon]="video.type === 'external' ? 'open-in-new' : 'play-arrow'" style="color:#f3edbe;"></mat-icon>
<span class="alfadown">Link</span>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="favicon">
<mat-header-cell *matHeaderCellDef>Player</mat-header-cell>
<mat-cell *matCellDef="let video">
<img class="domain-favicon" [src]="getFavicon(video.url)" alt="Video domain favicon">
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef trans>Name</mat-header-cell>
<mat-cell *matCellDef="let video" (click)="playVideo(video)">
<mat-icon svgIcon="play-arrow" class="play-icon"></mat-icon>
<div [innerHTML]="video.name"class="video-name">{{video.name}}</div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="quality">
<mat-header-cell *matHeaderCellDef trans>Quality</mat-header-cell>
<mat-cell *matCellDef="let video">
<div class="name">{{video.quality}}</div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="created_at">
<mat-header-cell *matHeaderCellDef trans>Added At</mat-header-cell>
<mat-cell *matCellDef="let video">{{video.created_at | formattedDate}}</mat-cell>
</ng-container>
<ng-container matColumnDef="report">
<mat-header-cell *matHeaderCellDef trans>Report</mat-header-cell>
<mat-cell *matCellDef="let video">
<button mat-icon-button class="report-button" [disabled]="loading$ | async" (click)="reportVideo(video)">
<mat-icon svgIcon="report"></mat-icon>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="edit">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let video">
<edit-title-video-widget [video]="video"></edit-title-video-widget>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="['play', 'favicon', 'name', 'quality', 'created_at', 'report', 'edit']"></mat-header-row>
<mat-row *matRowDef="let video; columns: ['play', 'favicon', 'name', 'quality', 'created_at', 'report', 'edit']"></mat-row>
</mat-table>
Я хочу добавить код scssкак это:
.highlight {
background: #ababab url(/eye.png) no-repeat right center;
padding: 1px 30px 1px 1px;
}
По сути, я хочу показать изображение на правой стороне каждой строки, в которой пользователь делает клик.
Это должнопомогите пользователям отличать открытые ссылки от тех, которые не открылись.
Если кто-то может помочь, я был бы очень признателен, если бы вы могли добавить код, основанный на моем примере кода выше.