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