CODEWITHSUNDEEP
ionic-frameworkionic3
core114
core114

Reputation: 5325

Ionic select list added image icon does not work

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>

Upvotes: 1

Views: 9435

Answers (3)

olivier cherrier
olivier cherrier

Reputation: 274

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

Upvotes: 1

Paulius Nyoumi
Paulius Nyoumi

Reputation: 189

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"}

Upvotes: 0

Cliveburr
Cliveburr

Reputation: 141

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);
}

enter image description here

Upvotes: 6

Related Questions