CODEWITHSUNDEEP
htmlangularcssangular-material
Mat
Mat

Reputation: 711

Angular material put image on selected value of <mat-select>

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 help me?

Upvotes: 18

Views: 33650

Answers (4)

Tarek Elmadady
Tarek Elmadady

Reputation: 346

enter image description here

Use Mat Select Trigger check: https://material.angular.io/components/select/api#MatSelectTrigger

<mat-form-field>
      <mat-label>....</mat-label>
      <mat-select [formControl]="fromControl">
        <mat-select-trigger>
          <img src="assets/images/currencies/{{fromControl.value}}.svg">
          <span>{{fromControl.value}}</span>
        </mat-select-trigger>
        <mat-option>
          <img src="imageSrc">
          <span>...</span>
        </mat-option>
      </mat-select>
    </mat-form-field>

Upvotes: 4

Jellicle
Jellicle

Reputation: 30206

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>

Upvotes: 0

Vega
Vega

Reputation: 28701

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-option value="option1">Option 1
      <img with="10" height="10" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">

    </mat-option>      
    <mat-option value="option2">Option 2
      <img with="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-option value="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

Upvotes: 13

Gepiden
Gepiden

Reputation: 839

enter image description here

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

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

Upvotes: 41

Related Questions