Ionic Select list option with flag/image

Ionic Framework ionic-v3
1

Hi,

I have to make ionic select list option with country flag/img as like given in following screenshot-

image

Any idea to add flag/image in select list in Ionic2/3…

Thanks,

1 Like
2

flag-icon-css looks like it might be helpful.

1 Like
3

Hi,

As per your suggestion of https://github.com/lipis/flag-icon-css (css will be helpful) , I have done following changes

In html:

<ion-select>
  <ion-option *ngFor="let cc of currencyList" value="{{ cc }}">
    <span class='flag-icon flag-icon-{{ cc.slice(0, -1) }}'></span>
    {{ cc }}
  </ion-option>
</ion-select>

and in the JS/TS:

this.currencyList = [
    'INR',
    'GBP',
    'USD',
    'NZD'
  ]

but image is not displaying. Also I checked that adding any html tag/class inside <ion-option> does not displayed on views.

Please advise how to achieve this from Ionic?

Thanks,

4

Hi @satyaprakash_pandey

did you find a solution to this issue?

2 Likes
5

@mthomka, @satyaprakash_pandey Did anyone find a way?

6

I’m trying to figure this out as well!

7

any changes or hints here ?

9

Any solution pelase ?

10

If you want something like:

ionselectfor%20color%20and%20images
ionselectfor color and images.PNG1128×618 28.3 KB

ionselect%20for%20images
ionselect for images.PNG1253×663 68.7 KB

Please refer my github repository: https://github.com/ketanyekale/ionic-color-and-image-selector

I needed a color selector couple of months ago but I couldn’t find any. I tried adding CSS classes to ion-select and ion-option but the classes doesn’t get reflected in the generated output. So the only way to apply the custom CSS to ion-select and ion-options is by using the parent element and some JS(/TS).

After implementing the color selector I used the same logic to build image selector.

Hope ionic team can implement this in a better and optimized way and provide an inbuilt option for selecting image and color using ion select.

1 Like
11

How to get data with api in ionic…like given below
image

using api call.

1 Like
12

Html.

    <ion-select [selectOptions]="selectOptions" [(ngModel)]="courseBegin" interface="popover">
      <ion-option   *ngFor="let cc of currencyList" value="{{ cc }}"  >
      
        {{ cc }}
      </ion-option>
    </ion-select>

Js.

//Add class
this.selectOptions = {
      cssClass : 'course-popover'
    };
 
    this.currencyList = [
      'RUB',
      'USD',
      'EUR',
      'CHF',
      'GBP',
      'JPY',
      'UAH',
      'KZT',
      'BYN',
      'TRY',
      'CNY',
      'AUD',
      'CAD',
      'PLN',
    ];

Scss example:

$flag-icon-css-path: '../../../assets/images/flag/' !default;

@mixin flag-icon($n, $country) {

  &:nth-child(#{$n}):before {

    @extend .flag-icon-background;
    background-image: url(#{$flag-icon-css-path}#{$country}.svg);

    content: "";
    height: 17px;
    width: 22px;
    position: absolute;
    top: 11px;

  }

}

@mixin flag-icon-current($country) {

  [ng-reflect-model="#{$country}"] .select-text:before {

    @extend .flag-icon-background;
    background-image: url(#{$flag-icon-css-path}#{$country}.svg);

    content: "";
    height: 17px;
    width: 22px;
    position: absolute;
    top: 0px;
    left: 0px;

  }

}


.course-popover {

  .popover-content {

    width: 150px !important;

  }

  ion-list {
    ion-item {

      .label-ios {

        padding-left: 30px;
      }

      position: relative;

      @include flag-icon(1, 'RUB');
      @include flag-icon(2, 'USD');
      @include flag-icon(3, 'EUR');
      @include flag-icon(4, 'CHF');
      @include flag-icon(5, 'GBP');
      @include flag-icon(6, 'JPY');
      @include flag-icon(7, 'UAH');
      @include flag-icon(8, 'KZT');
      @include flag-icon(9, 'BYN');
      @include flag-icon(10, 'TRY');
      @include flag-icon(11, 'CNY');
      @include flag-icon(12, 'AUD');
      @include flag-icon(13, 'CAD');
      @include flag-icon(14, 'PLN');



    }
  }
}

//For style after insertion

  @include flag-icon-current('RUB');
    @include flag-icon-current('USD');
    @include flag-icon-current('EUR');
    @include flag-icon-current('CHF');
    @include flag-icon-current('GBP');
    @include flag-icon-current('JPY');
    @include flag-icon-current('UAH');
    @include flag-icon-current('KZT');
    @include flag-icon-current('BYN');
    @include flag-icon-current('TRY');
    @include flag-icon-current('CNY');
    @include flag-icon-current('AUD');
    @include flag-icon-current('CAD');
    @include flag-icon-current('PLN');
13

Thanks. You’ve save my live :grinning::grinning:

14

Hi, How to archive , drop-down with image in ionic. please help me.
image

thanks

3 Likes
15

Have you found out how to make this happen with ion-select-option?

16

Have you got desired output?

17

u can look for possible solution in one of the answers here its the same topic

18

Have you got the way how to achieve this?

19

Have you got the right answwer?

20

Hi Everyone , i want to show dropdown with icon display.

  <ion-label>Rating</ion-label>

  <ion-select value="all" >

    <ion-select-option value="all">All</ion-select-option>

    <ion-select-option value="one"><ion-icon name="star"></ion-icon></ion-select-option>

    <ion-select-option value="two"><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon></ion-select-option>

    <ion-select-option value="three"><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon></ion-select-option>

    <ion-select-option value="four"><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon></ion-select-option>
    <ion-select-option value="five"><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon></ion-select-option>

  </ion-select>

</ion-item>
22

I have created ion-select with image and posted on github have a look

2 Likes