Get the selected items and validate the number of checked items? - ionic-framework

Question

I'm using an ion-select and I'm enabling the multiple attribute to select several options. I can not find a way to disable the rest of the options in real time if 3 options have already been checked. I am currently using the ionSelect event, but it only works when an option is checked. How can I solve my problem? How can I solve my problem? I would like to understand how I know how many options I have marked and get their value in real time.
This is my code:
https://stackblitz.com/edit/ionic-8wewvd?file=pages/home/home.ts
pages/home
<ion-label>Select a person</ion-label>
<ion-select [(ngModel)]="person" multiple="true">
<ion-option *ngFor="let item of options; let i = index"
[value]="item.id" (ionSelect)="fn_checkOptions()" >
{{item.name}}
</ion-option>
</ion-select>
export class HomePage {
public options:object=[];
constructor(public navCtrl: NavController) {
this.options=
[
{"name":"pedro","id":1},
{"name":"juan","id":2},
{"name":"maria","id":3},
{"name":"velez","id":4},
{"name":"yaya","id":4}
]
}
fn_checkOptions(){
alert("hey")
}
}

Answer 1

I did the following:
Get a reference of our Ion Select as a #ViewChild and search it's properties until I found where the values of the checked items are stored. select._overlay.data.inputs looks promising, but of course this may be subject to changes in future Ionic versions.
Once we got the inputs we can filter those who are actually checked and do our logic.
See the code here or as Stackblitz.
HTML:
<ion-item>
<ion-label>Select a person</ion-label>
<ion-select #select [(ngModel)]="person" multiple="true">
<ion-option *ngFor="let item of options; let i = index" [value]="item.id" (ionSelect)="fn_checkOptions()">
{{item.name}}
</ion-option>
</ion-select>
</ion-item>
TS:
import { Component, ViewChild } from '#angular/core';
import { NavController, Select } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
#ViewChild('select', { read: Select }) select;
public options: object = [];
constructor(public navCtrl: NavController) {
this.options =
[
{ "name": "pedro", "id": 1 },
{ "name": "juan", "id": 2 },
{ "name": "maria", "id": 3 },
{ "name": "velez", "id": 4 },
{ "name": "yaya", "id": 4 }
]
}
fn_checkOptions() {
let inputs = this.select._overlay.data.inputs;
let checkedItems = inputs.filter(item => item.checked);
if (checkedItems.length === 3) {
// Disable checkboxes here
console.log('Three checkboxes have been checked');
}
}
}