CODEWITHSUNDEEP
angularsyntax-highlighting
ivan
ivan

Reputation: 95

Angular material table highlight a row on click

How to add "highlight" to an row on click - angular 8

I have this table:

<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>

I want to add an scss code like this:

.highlight {
background: #ababab url(/eye.png) no-repeat right center;
padding: 1px 30px 1px 1px;

}

Basically, I want to show an image on the right side of each row, in which a user make click.

This should help users to differentiate the links they have opened, from those that have not opened.

If someone can help, I would greatly appreciate if you can add a code based on my code example above.

Upvotes: 1

Views: 3971

Answers (1)

Gaurang Dhorda
Gaurang Dhorda

Reputation: 3387

Add mat- row like this...

 <mat-row *matRowDef="let row; columns: displayColumn;" 
          (click)="onRowClicked(row)" 
          [ngClass]="{highlighted: selectedIndex === row.key  }" 
          (mouseover)="highlight(row)">
</mat-row>

And your highlight (row) and onRowClicked(row) is...

   onRowClicked(row) {
        console.log('row clicked ' + JSON.stringify(row));
        const index = this.listData.data.indexOf(row);
        console.log( ' Index ' + index);
  }
  highlight(row) {
      this.selectedIndex = row.key;
  }

Based on " selectedIndex " you can show or hide elements in that row.

Upvotes: 1

Related Questions