Angular material , to select mat-list-option and show the respective data of the selected mat-list-option

Question

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 first column data on the left hand side of the mat-dialog.

I need to achieve 2 things

1) On the left hand side of mat-dialog, mat-list-option should be selected by default depending on whichever row user hovered upon and clicked on its tooltip button.

2) The right hand side of the mat-dialog needs to be populated with "conditionals","offset","alert" property data related to mat-list-option selected on the left hand side.

Eg: In table user had hovered on 1 min data(under Alert column) and clicks on the button once the tooltip opens , in the mat-dialog 1 min data row should be selected and on right hand side its respective "conditionals","offset","alert" data should load , so accordingly depending on the selected mat-list-option its respective "conditionals" data should load.

I already have enforced only one mat-list-option can be selected at a time

alert-dialog.component.html

<div [ngStyle]="{'width':'50%','border':'1px solid yellow','margin-right':'15px','height':'100%'}">
        <h3>LEFT</h3>
        <div class="alert-select">
            <mat-selection-list #preDefAlertList>
                <mat-list-option *ngFor="let preDef of data.data" [value]="preDef">
                  {{preDef.Alert}}
                </mat-list-option>
            </mat-selection-list>
        </div>  
</div>

<div [ngStyle]="{'width':'100%','border':'1px solid red'}">
        <h3>Edit JSON</h3>
        <div class="makeEditable" contenteditable="true">
            {{preDef.conditionals | json}}
        </div>
 </div>

tooltip-overview-example.component.ts has the table and data is being passed on to alert-dialog.component.ts once user clicks on the button present in tooltip.

Stackblitz link https://stackblitz.com/edit/angular-mat-tooltip-rzstlk?file=app%2Ftooltip-overview-example.ts

Basically I have to show pre selected mat-list-option on left hand side of mat-dialog and same json data (which was being shown inside tooltip) on the right side of the mat-dialog but when the user selects some different mat-list-option then its respective "conditionals","offset","alert" json data — Enthu

Kari F. Kari F. · Accepted Answer · 2020-03-19T04:09:37

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:

<div class="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:

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

in the model:

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

Angular material , to select mat-list-option and show the respective data of the selected mat-list-option

1 Answers