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

Issue

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

    <ion-select
      [value]="objectConfig!.soundType"
      interface="popover"
      (ionChange)="newSoundType.emit($event)"
    >
      <ng-container *ngFor="let soundType of SoundTypesArray">
        <ion-select-option [value]="soundType" id="soundType-{soundType}">
          {{ soundType  }}
        </ion-select-option>
      </ng-container>
    </ion-select>





/// 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" ?

Edit:

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: https://stackblitz.com/edit/ionic-select-problem?file=pages%2Fhome%2Fhome.ts

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

Solution

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>
            <ion-select
          #ionSelect
      [ngModel]="configObject.soundType"
      [selectedText]="configObject.soundType"
      interface="popover"
      (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;
    }
    this.newSoundType.emit(event);
  }

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