CODEWITHSUNDEEP
ionic-frameworkionic4ionic-native
mos
mos

Reputation: 121

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

The desired pages

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. I tried to use 

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

Upvotes: 0

Views: 2382

Answers (1)

msd117
msd117

Reputation: 386

for selecting the country code value you can use [value] property of ion select option and for displaying the selected value you can use [selectedText] property of ion select in ionic 4/5

you can find official documentation here

 <ion-select formControlName="country" [selectedText]="signupform.controls.country.value"  name="country" #countryselect id="countryselect">
 <ion-select-option *ngFor="let country of countries" [value]="country.id">
     {{country.name}}
 </ion-select-option>
 </ion-select>

Upvotes: 2

Related Questions