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
}
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>
Post a Comment for "Angular Material Put Image On Selected Value Of"