How can I add a flag to ion-select or ionic-selectable?

@melnahas wrote:

I want to use the https://github.com/lipis/flag-icon-css with ionic-select and https://www.npmjs.com/package/ionic-selectable. I have tried many methods after I installed the packages as I show in my code but it did still does not show me the flag either way. What are the steps I need to take to make it work?

ionic_select.html

<ion-select #select1 [(ngModel)]="selectedCode"> 
<ion-select-option *ngFor="let c of countries" value="{{c.flag}}{{c.code}}">{{c.flag}}{{c.name}}</ion-select-option> 
</ion-select> 

ionic_select.ts

countries: any = [ {   code: '+93',   name: 'Afghanistan',   flag: './assets/flags/af.png' }, 

ionic_selectable.html

<ion-item>  
<ionic-selectable  item-content  [(ngModel)]="port"  [items]="ports"  itemTextField="country"   [canSearch]="true"  (onChange)="portChange($event)"    
</ionic-selectable> 
<span class="flag-icon flag-icon-{flag}"></span>  
</ion-item> 

ionic_selectable.ts

class country { 
public country: string; 
public flag: string;  
} 
export class Classname {   
ports: country[];    
port: country;
constructor(){    
this.ports = [    {country: 'afghanistan',     flag: './assets/flags/af.png}],  
}

Posts: 1

Participants: 1

Read full topic