CODEWITHSUNDEEP
angularangular-materialangular-material-6
andhrew_
andhrew_

Reputation: 95

Display image in mat-select coming from mat-option

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.

Upvotes: 3

Views: 3260

Answers (1)

Alberto AM
Alberto AM

Reputation: 320

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

Upvotes: 2

Related Questions