Ionic 3 custom selector for ion-option

Question

I have an ion-select with dynamic ion-option. My task is to disable the save button of ion-select when more than 5 result are selected. I found ionSelect event which calls controller method each time when an checkbox is clicked in ion-select.

My code:

HTML:

<ion-select [(ngModel)]="users" multiple="true">
      <ion-option value="{{t.userId}}" *ngFor="let t of possibleUsers" (ionSelect)="onUserSelect()">{{t.userName}}</ion-option>
</ion-select>

TS:

public onUserSelect(value) {
 console.log(value);
}

How I see value param in onUserSelect method is the selected checkbox value and before it is checked or unchecked. So without a selector I cannot tell on which checkbox was clicked with javascript.

I cannot add any selector to ion-option, I already tried:

[custom-data]="t.userId", class="my-class", id="customId-{{t.userId}}", data-custom="customId-{{t.userId}}"

But none of them are added to ion-option.

Any idea how to add unique selector to ion-option or how to send checkbox state in ionSelect event?

Answer 1

Hope this is you are expecting to do

  onUserSelect(value) {
    console.log(value);
  }

<ion-select [(ngModel)]="users" multiple="true">
      <ion-option value="{{t.userId}}" *ngFor="let t of possibleUsers" (ionSelect)="onUserSelect(t.userId)">{{t.userName}}</ion-option>
</ion-select>
<!-- if this is your save button -->
<button ion-button [disabled]="users.length > 5">Save</button>