How to use images inside a select component in Ionic 2

Question

I am trying to put an image inside a Select component in Ionic 2 : I have put the image source files inside the www/img folder in my Ionic 2 project. However, using a simple img-tag does not display any image using this code:

<ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select [(ngModel)]="gaming">
      <ion-option value="nes">
        NES
        <img src="img/myImage.png">
      </ion-option>
    </ion-select>
  </ion-item>
</ion-list>

Does anyone have any idea?

Answer 1

The ion-select component doesn't allow direct customization to itself and anything that you add to ion-select and ion-option which is not as per the ionic documentation, will be ignore in the generated output.

You cannot add class or style to the component.

One way to do this is to put the ion-select in a parent element like div or ion-row etc. with class and apply the CSS rules using .parentclass childElement selector.

To show the images in option check the function below:

    prepareImageSelector() {
    setTimeout(() => {
        let buttonElements = document.querySelectorAll('div.alert-radio-group button');
        if (!buttonElements.length) {
            this.prepareImageSelector();
        } else {
            for (let index = 0; index < buttonElements.length; index++) {
                let buttonElement = buttonElements[index];
                let optionLabelElement = buttonElement.querySelector('.alert-radio-label');
                let image = optionLabelElement.innerHTML.trim();
                buttonElement.classList.add('imageselect', 'image_' + image);
                if (image == this.image) {
                    buttonElement.classList.add('imageselected');
                }
            }
        }
    }, 100);
}

I have implemented color and image selector using ion-select. Please refer https://github.com/ketanyekale/ionic-color-and-image-selector

You can also check the answer at Ionic select input of colours

Answer 2

On your basis, I have worked out a more concise solution！

The method 'prepareImageSelector' is used as the Click event of the control。

Thank you！

   image: string = 'English';
 
   prepareImageSelector() {
    setTimeout(() => {
      let buttonElements = document.querySelectorAll('div.alert-radio-group button');
      if (!buttonElements.length) {
        this.prepareImageSelector();
      } else {
        for (let index = 0; index < buttonElements.length; index++) {
          let buttonElement = buttonElements[index];
          let optionLabelElement = buttonElement.querySelector('.alert-radio-label');
          let image = optionLabelElement.innerHTML.trim();
          if (image == this.image) {
            optionLabelElement.innerHTML += '<img  src="assets/img/English.png" style="width:20px;height:20px;float:right;"/>';
          }
        }
      }
    }, 100);
  }

Answer 3

I achieved it like this.

<ion-select (click)="loadFlags()" formControlName="pays"  value="select-country">           
    <ion-select-option  value="select-country" >select your country </ion-select-option>
    <ion-select-option *ngFor="let country of countries" value="{{country.name}}">{{country.name}}</ion-select-option>
</ion-select>

And this is my .ts file

loadFlags() {
    setTimeout(function(){ 
     let radios=document.getElementsByClassName('alert-radio-label');
     for (let index = 1; index < radios.length; index++) {
        let element = radios[index];
        element.innerHTML=element.innerHTML.concat('<img class="country-image" 
       style="width: 30px;height:16px;" src="'+countries[index-1].flag+'" />');
      }
  }, 1000);
}

Timeout is to let the system create alert componens. My Json is an array with elements like {name:"Cameroon",flag:"https://restcountries.eu/data/cmr.svg"}