Angular Material Put Image On Selected Value Of

I am using angular material in an angular 2 project. I want to put a static image (html element) in the selected value of mat-select. But i didn't find a solution. Can someone he

Solution 1:

when it comes to this or similar situation, I did it that:

<mat-form-field><mat-select [(value)]="selectedLanguage"><mat-select-trigger><spanclass="flag-icon flag-icon-{{ selectedLanguage | lowercase}}"></span></mat-select-trigger><mat-option *ngFor="let lang of Languages" [value]="lang"><spanclass="flag-icon flag-icon-{{ lang | lowercase}}"></span></mat-option></mat-select></mat-form-field>

of course, inside tags <mat-select-trigger> and ` can be any tags as well img, and they work !!

Solution 2:

By simply adding <img> tag inside <mat-option>. For the selected option use ngClass to set the image as background. You must use one class by option:

HTML

<mat-select [(value)]="selected" [ngClass]="selected"><mat-option>None</mat-option><mat-optionvalue="option1">Option 1
      <imgwith="10"height="10"src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"></mat-option><mat-optionvalue="option2">Option 2
      <imgwith="10"height="10"src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"></mat-option><mat-optionvalue="option3">Option 3</mat-option></mat-select>

CSS:

.option1{
  background:  url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg")  center / contain no-repeat;
  white-space: nowrap

}


.option2{
  background:  url("https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg")  center / contain no-repeat;
  white-space: nowrap;
  display:inline
}

DEMO

Solution 3:

I recommend putting a <span> within the <mat-select-trigger> and/or <mat-option> elements, then binding html to it after the fashion precribed by this answer.

<mat-select><mat-select-trigger><span [innerHTML]="myHtmlWithImageTag"></span></mat-select-trigger><mat-option *ngFor="let item of items" [value]="item"><span [innerHTML]="myHtmlWithImageTag"></span></mat-option></mat-select>