Ion-select with Popover interface, running any function on click

I’m trying to run even a simple console.log, when a Popover interface ion-select is clicked.

user.html

<ion-item>
  <ion-label>Toppings</ion-label>
  <ion-select [(ngModel)]="selectedUser" multiple="false" interface="popover">
    <ion-option *ngFor="let user of users" value="user" (click)="selectUser(user)">{{user.name}}</ion-option>
  </ion-select>
</ion-item>

Then calling something like this

user.ts

userSelect(user) {
  console.log("CLICKED");
}

(click) and (ion-click) don’t do anything, no errors, no console logs.

I’m sure I’m missing something simple. Thanks for your help!

Why are you doing this? You already have bound the select itself, so selectedUser will be automatically updated appropriately.

In addition to binding to this selection, I need to trigger a filter on another option list. Basically select this user, and then show options specific to that user.

I would move your (click) listener on the option to (ionChange) on the select itself. Note that in order for your filter to take effect immediately out of that change handler, you will need to inject a ChangeDetectionRef and call detectChanges() on it manually.

2 Likes

That did it! Silly mistake on my part. Thanks for catching that.