Show extra values in mat option when panel is open

Question

<mat-select >
  <mat-option *ngFor="let i of List" [value]="i.value">
    {{i.viewValue}}<span *ngIf="panelOpen">{{i.viewValue2}}</span>
  </mat-option>
</mat-select>

I would like to show additional values in mat option row and hide that additional value after selection. Is There any possibility using panelOpen, Thanks in advance.

Answer 1

If you declare the mat-select as a variable using the # notation, you can then change your ngIf to mySelect.panelOpen where mySelect is the ID you gave the mat-select:

<mat-select #mySelect>
  <mat-option *ngFor="let i of List" [value]="i.value">
    {{i.viewValue}}
    <span *ngIf="mySelect.panelOpen">{{i.viewValue2}}</span>
  </mat-option>
</mat-select>

Here's a StackBlitz.