How can I insert Image on select tag in ionic 4?

Question

Here is my code:

home.page.html

    <ion-item>
     <ion-select (click)="loadFlags()" value="select-country" style="max-width: 100%;">
      <ion-select-option value="select-country">select your country </ion-select-option>
      <ion-select-option *ngFor="let country of countries" value="{{country.flag}}">
        {{country.name}}
      </ion-select-option>
     </ion-select>
     <ion-input type="tel" placeholder="Mobile Number" [(ngModel)]="number" slot="end"></ion-input>
    </ion-item>

home.page.ts

    public countries: any = [];

     async getCountries() {
      await this.http.getCounteries()
        .subscribe(countries => {
          // console.log("countries", countries);
          this.countries = countries;
        }, err => {
          // console.log("err", err);
          this.countries = err;
        });
    }

    loadFlags() {
      setTimeout(()=>{ 
        let countries = this.countries;
        // console.log("get countries", countries);
       let radios=document.getElementsByClassName('alert-radio-label');
       for (let index = 1; index < radios.length; index++) {
          let element = radios[index];
          // console.log("element", element);

          // console.log("index", countries[index-1].flag);
          element.innerHTML=element.innerHTML.concat('<img class="country-image" style="width: 30px;height:16px;" src="'+countries[index-1].flag+'" />');
        }
    }, 50);
    }

And I want same look like following:

I have tried all possible solutions. but not any luck.

How can I get same look?. Please guide any code as soon as possible. It would be really appreciated.

I get result as following image:

I need to display flag image on select instead of country name when selected any country from the options.

Answer 1

Rather than re-inventing this yourself, you might want to try out a community developed solution.

I just did a search and found ngx-country-picker.

You could use it something like this:

<country-picker [flag]="true" [setValue]="'callingCode'" [setName]="'name.common'"></country-picker>

You can see the full list of available fields in this related repo, which it lists as the inspiration.