How do I make my ion select choose and display the country code?

Ionic Framework
1

Sing_up_flow
I am trying to add a country code where when you press on the selector under the “country” label, in the second picture, you get a list like the first picture with the country names and the flags next to it then you would be redirected to the second picture with the selector displaying the selected country flag and the country code

2

Which bit are you having trouble with, the way the select displays - you want it full screen?, or that you want to save the “value” for country code “AU” rather than “Australia”

If the latter, then you need to set the “value” for the ion-select-option, as per the help…

        <ion-item>
          <ion-label>Gaming</ion-label>
          <ion-select interface="popover">
            <ion-select-option value="nes">NES</ion-select-option>
            <ion-select-option value="n64">Nintendo64</ion-select-option>
            <ion-select-option value="ps">PlayStation</ion-select-option>
            <ion-select-option value="genesis">Sega Genesis</ion-select-option>
            <ion-select-option value="saturn">Sega Saturn</ion-select-option>
            <ion-select-option value="snes">SNES</ion-select-option>
          </ion-select>
        </ion-item>
1 Like
3

Thank you for the solution

I want when I press the selector to get a list of country names and next to it the country’s flag would be displayed as well.

Australia
Brazil
Spain
United States

But when I choose “United States” from the select I want the country code to display the US flag and +1

4

I have also tried this and I am receiving a “identifier selectedcode is not defined” in the HTML

 Html                    
                 <ion-row>  
                <ion-col>
                    <ion-item (click)="openSelect()">
                  <div class="ion-text-left">

                      <ion-label position="stacked">البلد</ion-label>
                      <ion-input [(ngModel)]="selectedCode"></ion-input>
                    </div>
                  </ion-item>
                      <ion-item style="display: none">
                          <div class="ion-text-left">
                              <ion-label >البلد</ion-label>
                              <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>

                            </div>
          </ion-item>
          </ion-col>

.TS
@ViewChildren('select1') select1: Select;
 countries: any = [
    {
      code: '+91',
      flag: [./in.png],
      name: 'India'
    },
    {
      code: '+1',
      flag: [./US.png]
      name: 'America'
    }
  ];

 openSelect() {
    setTimeout(() => {
      this.select1.open();
    }, 150);
  }