Angular Material , To Select Mat-list-option And Show The Respective Data Of The Selected Mat-list-option

When the user hovers over the first column of the table , a tooltip comes up which has a button at the bottom. On click of the button, angular mat-dialog opens up which has the fir

Solution 1:

First, in the left hand list, you have to set the selected value of the mat-selection-list binding it to your model: [(ngModel)]="incomingSelectedAlert".

Then in the mat-list-options use the index as the value for the list item: let i = index" [value]="i" and highlight the selected item setting its class: [ngClass]="i==incomingSelectedAlert ? 'selected-option' : ''"

That way the whole mat-selection-list looks like this:

<mat-selection-list #preDefAlertList [(ngModel)]="incomingSelectedAlert"><mat-list-option *ngFor="let preDef of data.data; let i = index" [value]="i" 
    [ngClass]="i==incomingSelectedAlert ? 'selected-option' : ''">
      {{preDef.Alert}}
    </mat-list-option></mat-selection-list>

Add the selected option style in the CSS-file:

.selected-option {
  background-color: yellow;
}

Back in the template file, simply change the source of the right hand JSON data so that it always shows the selected items conditionals:

<divclass="makeEditable"contenteditable="true">
  {{data.data[incomingSelectedAlert].conditionals | json}}
</div>

As you can see you almost had it. I forked and made the changes to your Stackblitz here: https://stackblitz.com/edit/angular-mat-tooltip-pjq4ve.

Update

Based on your comments I made this other Stackblitz: https://stackblitz.com/edit/angular-mat-tooltip-fhh3gr

The mat-list-options value comes now from the items id property: <mat-list-option *ngFor="let preDef of data.data" [value]="preDef.id".

And to get the conditionals it calls a method:

<divclass="makeEditable"contenteditable="true">
    {{getSelectedConditionals() | json}}
</div>

in the model:

getSelectedConditionals() {
   returnthis.data.data.find(x => x.id == this.incomingSelectedAlert).conditionals;
}