Display image in mat-select coming from mat-option

Question

So, i have a piece of html that includes a mat-form-field who have a mat-select and an mat-option. Those mat-options are generated from the server and they have an image that i need to display in the mat-select when an option is selected(every option has his own image)

<mat-select>
    <ng-container
            *ngFor="let option of options">
            <mat-option>
                <!-- Image -->
                    <img
                        height="24px"
                        [src]="option[optionLabelImgKey]"/>
                !-- Label -->
                {{option[optionLabelKey] | translate}}
            </mat-option>
     </ng-container>
</mat-select>

I want to display the optionLabel and the image in the mat-select every time a new option is selected.

I've read about mat-select-trigger but nothing works for me.

Possible duplicate of Angular material put image on selected value of <mat-select> — Oram

Alberto AM Alberto AM · Accepted Answer · 2018-11-28T14:40:18

Try to put this:

<img height="24px" src="option[optionLabelImgKey]"/>

Maybe your problem is that the img is not displayed due to it cannot acces to the file (bad route).

By the way I created a fork at stackblitz with a working example of a list of images inside the mat-select you can have a look at: https://stackblitz.com/edit/angular-9txen8

Display image in mat-select coming from mat-option

1 Answers