CODEWITHSUNDEEP
angularangular-material2
Marcogomesr
Marcogomesr

Reputation: 2672

How can I add images on the Angular 2/4 material design select component

I'm using the material angular select component. I can see the icons when I click on the selector but the problem is when I choose an option it only shows the value and not the icons.

At the moment the code is rewriting the <md-option> removing the <img> tag and adding the {{bodyStyle.viewValue}}

app.component.html

<div class="form-control form-control--center">                 
 <md-select [(ngModel)]="selectedBodystyle" floatPlaceholder="never" name="bodyStyle">
    <md-option *ngFor="let bodyStyle of bodyStyles" [value]="bodyStyle.value">
        <img src="{{bodyStyle.icon}}" alt="{{bodyStyle.viewValue}}">
            {{bodyStyle.viewValue}}

    </md-option>
 </md-select>
</div>

app.component.ts

  selectedBodystyle: string;
  bodyStyles = [
    { value: 'Mercedez' , viewValue: 'Mercedez', icon: "http://lorempixel.com/50/50/transport/" },
    { value: 'Ferrari'  , viewValue: 'Ferrari' , icon: "http://lorempixel.com/50/50/transport/" },
    { value: 'BMW'      , viewValue: 'BMW'     , icon: "http://lorempixel.com/50/50/transport/" }
  ];

Update

I tried to add the image in the viewValue attribute like

{ value: 'Ferrari'  , viewValue: '<img src="http://lorempixel.com/50/50/transport/" alt="Ferrari">Ferrari' }

but it loads the html in plain text it doesn't show the image after being selected

This is what it shows after select an option it removes the image it shows only the only the content from the viewValue

enter image description here

Upvotes: 2

Views: 4918

Answers (2)

Nehal
Nehal

Reputation: 13307

Update (Showing icon next to md-menu beta.8):

You can put a separate <img> tag next to md-menu and use the image src from selected menu item. Please note, for that, the value needs to bind with whole object, not the object property only.

html:

<div class="form-control form-control--center">  
<i *ngIf="selectedIcon"><img [src]="selectedIcon" alt="selectedIcon" style="margin-bottom: -15px"></i>
 <md-select [(ngModel)]="selectedBodystyle" 
            floatPlaceholder="never" 
            name="bodyStyle"
            (change)="optionSelected($event)">
    <md-option *ngFor="let bodyStyle of bodyStyles" [value]="bodyStyle">
        <img [src]="bodyStyle.icon" [alt]="bodyStyle.viewValue">
            {{bodyStyle.viewValue}}
    </md-option>
 </md-select>
</div>

ts:

export class SelectFormExample {
  selectedBodystyle: string;
  selectedIcon;
  bodyStyles = [
    { value: 'Mercedez' , viewValue: 'Mercedez', icon: "http://lorempixel.com/40/40/transport/" },
    { value: 'Ferrari'  , viewValue: 'Ferrari' , icon: "http://lorempixel.com/30/30/transport/" },
    { value: 'BMW'      , viewValue: 'BMW'     , icon: "http://lorempixel.com/50/50/transport/" }
  ];

  optionSelected(event){
    // console.log(event.value.icon);
    this.selectedIcon = event.value.icon;
  }
}

Plunker demo

Original:

Use [src]="bodyStyle.icon" instead of src="{{bodyStyle.icon}}"

I suggest doing the same for alt="{{bodyStyle.viewValue}}" too. Change to [alt]="bodyStyle.viewValue"

Upvotes: 7

tobias-kutter
tobias-kutter

Reputation: 269

It's a shot in the dark but try 

<img [src]="bodyStyle.icon"...

Upvotes: 0

Related Questions