javascript - To highlight the selected row in mat-selection list and show its corresponding data by default

Question

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 time when the dialog opens up the row is not selected by default.

Note: (after the dialog has opened then on selecting any row its corresponding data loads and the row gets higlighted ,so this part works, but default highlighting of the left section row does not work when the popup opens for the first time)

The dialog contains 2 sections left and Edit json and. In the left whichever row is selected its corresponding data on the right side as json is shown.

alert-dialog.component.html

<div class="row align-items-center">
    <div class="col-6 d-flex flex-column">
        <span class="sub-section p-t-26 p-b-10">Predefined Alerts</span>
        <div class="alert-select">
            <mat-selection-list #preDefAlertList (selectionChange)="selectionChanged($event)">
                <mat-list-option #option *ngFor="let preDef of data.data; let i = index" [value]="i" [ngClass]="option.selected ? 'selected-option' : ''">
                  {{preDef.alert}}
                </mat-list-option>
            </mat-selection-list>
        </div>
        <span class="sub-section p-t-10 p-b-10">Custom Alerts</span>
        <div class="alert-select">
            Lorem ipsum
        </div>
    </div>
</div>

alert-dialog.component.ts

export class AlertDialogComponent {

@ViewChild(MatSelectionList) preDefAlertList: MatSelectionList;
jsonform: FormGroup;

constructor( public dialogRef: MatDialogRef<AlertDialogComponent>,
             @Inject(MAT_DIALOG_DATA) public data: DialogData, private alertService: AlertService,
             private fb: FormBuilder) {
        console.log(data);
        this.jsonform = this.fb.group({
            json: [data['data'][0].conditionals]
          });      
}

ngOnInit(){
    this.jsonform.statusChanges.subscribe(() => {
        if(!this.jsonform.valid && this.jsonform.dirty){
            console.log("form is dirty and not valid")
        }else{
            console.log("form is dirty but valid")
        }
      });

    this.preDefAlertList.selectionChange.subscribe((s: MatSelectionListChange) => {
        this.preDefAlertList.deselectAll();
        s.option.selected = true;
    });
}

selectionChanged(event: MatSelectionListChange) {
    this.jsonform.setValue({
      json: this.data['data'][event.option.value].conditionals
    });
  }

onAddNewAlert(){
    if(!this.jsonform.valid && this.jsonform.dirty){
        console.log("final validation")
    }
 }
}

stackblitz link

https://stackblitz.com/edit/angular-mat-tooltip-uwsbqa?file=app/alert-dialog/alert-dialog.component.html

This below link is the older version before I did the changes where data was loading in mat dialog and the row was getting highlighted

https://stackblitz.com/edit/angular-mat-tooltip-qxxgcp?file=app%2Falert-dialog%2Falert-dialog.component.html

Answer 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