ng-selected attribute is not working on ion-select

Question

Good Day Everyone!

PROBLEM: Failed to display a selected option from a dynamic ion-select

DESCRIPTION:

I have two ion-select (dropdown), one for the city field and one for the barangay field. The barangay field displays dynamic values based on the selected city. This works properly but when I try to display a selected value, it doesn't work.

HTML

                  <!-- City -->
                  <ion-item class="form-field">
                    <ion-label stacked>City</ion-label>
                    <ion-select [(ngModel)]="city" (ionChange)="getBarangay('house')">
                      <ion-option value="Caloocan (NORTH) City" ng-selected="city == 'Caloocan (NORTH) City'">Caloocan City</ion-option>
                      <ion-option value="Caloocan (SOUTH) City" ng-selected="city == 'Caloocan (SOUTH) City'">Caloocan City</ion-option>
                      <ion-option value="Las Piñas City" ng-selected="city == 'Las Piñas City'">Las Piñas City</ion-option>
                      <ion-option value="Makati City" ng-selected="city == 'Makati City'">Makati City</ion-option>
                      <ion-option value="Malabon City" ng-selected="city == 'Malabon City'">Malabon City</ion-option>
                      <ion-option value="Mandaluyong City" ng-selected="city == 'Mandaluyong City'">Mandaluyong City</ion-option>
                      <ion-option value="Manila City" ng-selected="city == 'Manila City'">Manila City</ion-option>
                      <ion-option value="Marikina City" ng-selected="city == 'Marikina City'">Marikina City</ion-option>
                      <ion-option value="Muntinlupa City" ng-selected="city == 'Muntinlupa City'">Muntinlupa City</ion-option>
                      <ion-option value="Navotas City" ng-selected="city == 'Navotas City'">Navotas City</ion-option>
                      <ion-option value="Parañaque City" ng-selected="city == 'Parañaque City'">Parañaque City</ion-option>
                      <ion-option value="Pateros City" ng-selected="city == 'Pateros City'">Pateros City</ion-option>
                      <ion-option value="Pasay City" ng-selected="city == 'Pasay City'">Pasay City</ion-option>
                      <ion-option value="Pasig City" ng-selected="city == 'Pasig City'">Pasig City</ion-option>
                      <ion-option value="Quezon City" ng-selected="city == 'Quezon City'">Quezon City</ion-option>
                      <ion-option value="San Juan City" ng-selected="city == 'San Juan City'">San Juan City</ion-option>
                      <ion-option value="Taguig City" ng-selected="city == 'Taguig City'">Taguig City</ion-option>
                      <ion-option value="Valenzuela City" ng-selected="city == 'Valenzuela City'">Valenzuela City</ion-option>
                      <ion-option value="Other" ng-selected="city == 'Other'">Other</ion-option>
                    </ion-select>
                  </ion-item>


                  <!-- Barangay ** IF CITY IS SELECTED -->
                  <ion-item class="form-field" *ngIf="city != 'Other'">
                    <ion-label stacked>Barangay</ion-label>
                    <ion-select  placeholder="Barangay" [(ngModel)]="barangayId" [disabled]="!barangayList" (ionChange)="setBarangay('house')">
                      <ng-container *ngFor="let bl of barangayList let i = index">
                        <ion-option ng-selected="barangay == barangayList[i].name" value="{{i}}">{{barangayList[i].name}}</ion-option>
                      </ng-container>
                    </ion-select>
                    <ion-label error-field no-margin *ngIf="!isBarangayValid"><ion-icon name="ios-alert"></ion-icon> Please select one.</ion-label>
                  </ion-item>

TYPESCRIPT


  getBarangay(property) {
    var city = property == 'house' ? this.city.replace(' City', '') : this.businessCity.replace(' City', '');
    if (property == 'house') {
      this.barangayList = [];
    } else if (property == 'business') {
      this.businessBarangayList = [];
    }

    if ((property == 'house' &&  this.city != 'Other') || (property == 'business' &&  this.businessCity != 'Other')) { 
      let headers = new Headers ({
        'Accept' : 'application/json'
      });
      let options = new RequestOptions({ headers : headers });

      return new Promise((resolve, reject) => {
        this.http.post(this.apiBaseUrl + city + '/brgy',  options)
        .timeout(10000)
        .toPromise()
        .then((response) =>
        {
          // console.log('Get Barangay List API Response : ', response.json());
          var _response = response.json();
          
          if (property == 'house') {
            for (let element in _response) {  
              this.barangayList.push({  
                name: element.trim(),  
                code: _response[element]
              });
            }
          } else if (property == 'business') {
            for (let element in _response) {  
              this.businessBarangayList.push({  
                name: element,  
                code: _response[element]
              });  
            }
          }
          resolve(response.json());
        })
        .catch((error) =>
        {
          reject(error);
          this.loadingSrvc.hide();
          if (error.name == 'TimeoutError') {
            this.timeOut(property);
          } else {
            this.serverErrorDialog(error);
          }
        });
      });
    }
  }

  setBarangay(property) {
    if (property == 'house') {
      this.barangayCode = this.barangayList[this.barangayId].code;
      this.barangay = this.barangayList[this.barangayId].name;
    } else if (property == 'business') {
      this.businessBarangayCode = this.businessBarangayList[this.businessBarangayId].code;
      this.businessBarangay = this.businessBarangayList[this.businessBarangayId].name;
    }
  }

image|280x161

Fig 1. There is no displayed/selected option

image|275x381

Fig 2. Displays all the barangay of a selected city

I hope someone can help me with this. Thank you ????

Pankaj Sati Pankaj Sati · Accepted Answer · 2020-09-25T04:57:33

The reason behind the ion-select not displaying selected option is because of the 2-way data binding on ion-select: [(ngModel)]="barangayId"

<ion-select  placeholder="Barangay" [(ngModel)]="barangayId" [disabled]="!barangayList" (ionChange)="setBarangay('house')">

Because of this 2-way data binding, you are telling angular to show the selected option whose value property matches the value of barangayId
Currently, you are setting the option value as value="{{i}}". Since the barangayId does not match any option value, you can't see any selected option

Solution: Either use 2-way data binding with [(ngModel)] and don't add any additional logic like : ng-selected="barangay == barangayList[i].name".

Or

Don't use 2-way dta binding and keep the selected logic in option like the following:

<ion-option [selected]="barangay == barangayList[i].name" value="{{i}}">

You can get the value of <ion-select> in ionChange() by passing the current value with $event.target.value:

 <ion-select  placeholder="Barangay" [disabled]="!barangayList" (ionChange)="setBarangay($event.target.value)">

ng-selected attribute is not working on ion-select

1 Answers