To Highlight The Selected Row In Mat-selection List And Show Its Corresponding Data By Default

When we hover over the first column of the table a tooltip appears and then on clikcing on the button presnt in the tooltip mat dialog opens up. The data loads but for the first ti

Solution 1:

What I quickly can propose to you is to add ngAfterViewInit lifecycle hook and here mark the first option as selected.

ngAfterViewInit() {
    this.preDefAlertList.options.first.selected = true;
  }

EDIT - according to your comment

Please look at this example. Now I preselect element which was clicked and display its details on the right side. https://stackblitz.com/edit/angular-mat-tooltip-ki4r2q?file=app/alert-dialog/alert-dialog.component.ts

Solution 2:

try to use (selected) as input in mat-selection-list tag and then pass the parameter in the selectionChange Methode

Solution 3:

If you want "mark as selected" a row, you can has a variable

   selected:number=-1;

when you defined the mat-row, you add let i=index and you can change the style.background if i==selected, e.g.

 <tr mat-row *matRowDef="let row; let i=index columns: displayedColumns;" [style.background-color]="i==selected?'red':null"></tr>

The last step if give value to the variable selected. For this, in a td, you can pass the row (futhermore the element)

<tdmat-cell *matCellDef="let element;let i=index" 
     (click)="selected=i"> 
     {{element.position}} 
</td>

in this stackblitz if you "click" on "position", you see the row "selected".

In your case just in button you can add selected=i

  <button (click)="selected=i;
     onClick($event,(this.paginator.pageIndex == 0 ?  i : 
       i + this.paginator.pageIndex * this.paginator.pageSize))">
     Click
  </button>

Don't forget if you want "des-select" equal the variable to -1

dialogRef.afterClosed().subscribe(result => {
  this.selected=-1;
});