[FIXED] Is it possible to trigger an ion-select change without changing the model?


I have a simple ion-select in a dummy component:

      <ng-container *ngFor="let soundType of SoundTypesArray">
        <ion-select-option [value]="soundType" id="soundType-{soundType}">
          {{ soundType  }}

/// model:
@Input() objectConfig: ObjectConfig

it has just one job. Tell me when the user selected another SoundType (soundTypeA,soundTypeB and soundTypeC where soundTypeC requires the user to more steps or just cancel).

The problem I am having right now is that when the user chooses soundTypeC and cancels the <ion-select> box keeps showing soundTypeC as selected value instead of the previous one, even when objectConfig stills holds soundTypeA as soundType value.

I know I can resend the input() from my parent component but I am trying to prevent redraws. Is it possible to prevent ion-select to change their own value and just respect this -> [value]="objectConfig!.soundType" ?


To clarify: objectConfig is holding the correct value. I need ion-select to reflect what objectConfig.soundType says.

Using the banana in the box ([()]) with value or ngModel does not work.

Edit2 Stackblitz:

Edit3 Stackblitz:
Using carlosGlegaspi answer the external showed value of the ion-select is the correct but internally ion-select still holds the changed value

enter image description here


Using carlosGlegaspi answer as base I managed to fix this although it feels like a hack.

instead of send directly an event I call a function first and I also send a reference to ion-select:

 <ion-label>Sound Type</ion-label>
      (ionChange)="newSoundType($event, ionSelect)"

Then in the function I send the event but also reset the value of ionSelect

public emitNewSoundType(event: CustomEvent<IonSelect>, element: IonSelect): void {
    if (this.trainingConfig) {
      element.value = this.configObject.soundType;

stackblitz with an example (using ionic3 because I could not bring ionic 4 to work with stackblitz) https://stackblitz.com/edit/ionic-select-problem-solution?file=pages%2Fhome%2Fhome.ts

Answered By – distante

Answer Checked By – Marilyn (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published