Ionic select list added image icon does not work

Question

Im tried to put Ionic-3 select list for an image icon but its not work , anyone know how to do that correctly ?

this is my code

 <ion-item >
      <ion-label><p class="ion-lbl">Country</p></ion-label>
      <ion-select [(ngModel)]="Country">
          <option value="AF"><ion-img width="20" height="20" src="/assets/imgs/afg-icon.png"></ion-img> Afghanistan </option>
        <option value="AX">Åland Islands</option>
        <option value="AL">Albania</option>
        <option value="YE">Yemen</option>
        <option value="ZM">Zambia</option>
        <option value="ZW">Zimbabwe</option>


      </ion-select>
    </ion-item>

Cliveburr · Answer 1 · 2018-08-20T15:09:46.923

I has able to archive something like that with this css selector:

You need to now the sequence of yours options and create one css selector for each one, works for static data!

Here is HTML portion:

<ion-select #flagSelect
    [(ngModel)]="selectedLang"
    (ionChange)="onLanguageChange()">
    <ion-option *ngFor="let lang of langs"
        [value]="lang">
        {{lang.name}}
    </ion-option>
</ion-select>

The array langs is a static one, like that:

var langs = [
    { code: '', name: 'English', flagName: 'gb' },
    { code: 'pt', name: 'Portuguese (Brazil)', flagName: 'pt_BR' },
    { code: 'es', name: 'Espanhol', flagName: 'es' }
];

As my array is static, I can define the css for each ion-option:

.alert-radio-group button:nth-child(1) .alert-radio-label:before {
    content: url(/assets/imgs/flags/gb.png);
}

.alert-radio-group button:nth-child(2) .alert-radio-label:before {
    content: url(../assets/imgs/flags/pt_BR.png);
}

.alert-radio-group button:nth-child(3) .alert-radio-label:before {
    content: url(../assets/imgs/flags/es.png);
}

this is a great solution but I'm wandering why It's necessary.. — Davide C, Aug 06 '22 at 06:34
I posted an answer for Ionic Vue: https://stackoverflow.com/questions/37694564/how-to-use-images-inside-a-select-component-in-ionic-2/73753151#73753151 — jaletechs, Sep 17 '22 at 08:01

score 1 · Accepted Answer · edited Jul 13 '20 at 16:02

1

Firstly, use <ion-select> instead of <select>

Unfortunately, it seems difficult to add images inside ion-select. It seems like a duplicated question from here

edited Jul 13 '20 at 16:02

Community

1
1

answered Feb 11 '18 at 16:59

olivier cherrier

264
3
5

yeah Ionic team not yet provided more features – core114 Feb 12 '18 at 03:51

score 0 · Answer 3 · answered Aug 29 '19 at 16:21

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+'" />');
          }
      }, 2000);

  }

And my Json is an array with of {name:"Cameroon",flag:"https://restcountries.eu/data/cmr.svg"}

Ionic select list added image icon does not work

3 Answers3