Clearing an Ion selection option

Question

I have an Ion Select with Ion Select options generated dynamically. Sometimes there may be only one ion select option (as the user has only created one project, for example) available for the Ion Select.

When the user clicks on a select option it opens a project page, I want to give the user the option to re-select the same project again and thus clear the previous selection

I've tried binding a NgModel and set it to null as per:

ion-item-options not displaying

 <ion-select mode="md" interface="popover" style="position: absolute; opacity: 0;" #projectSelect
                               (ionChange)="selectProject(projectSelect.value, p)"
[(ngModel)]="selection">
        <ion-select-option *ngFor="let b of p.buildings; let i = index" [selected]="false" [value]="b.buildingName">
                           {{b.buildingName}}                      
        </ion-select-option>

then in selectProject() I set

selectProject(buildingName: string, project: Project) {
        // always! reset the selection
        this.selection = null;

but it does not clear the selection and the user is unable to re-select a previously selected option.

I have even tried having a button with (click)=clearSelection() setting selection=null to no avail.

I was expecting the selection to be cleared and to allow the user to re-select the ion select.

AT82 AT82 · Accepted Answer · 2019-07-31T15:24:13

This works with ionic ^4.7.1 when I tried it:

import { IonSelect } from '@ionic/angular';

// ...

// refer to the select via the template reference
@ViewChild('projectSelect', { static: false }) projectSelect: IonSelect;

selectProject(buildingName: string, project: any) {
  // do stuff
  this.projectSelect.value = '';
}

So you can remove ngModel altogether:

<ion-select mode="md" interface="popover" #projectSelect 
    (ionChange)="selectProject(projectSelect.value, p)">
  <ion-select-option *ngFor="let b of p.buildings;" [value]="b.buildingName">
    {{b.buildingName}}
  </ion-select-option>
</ion-select>

Clearing an Ion selection option

1 Answers