How to count the ion-select Childs (ion-option)?

2
votes

It possible to count the ion-option inside the ion-select?

<ion-select>
  <ion-option></ion-option>
  <ion-option></ion-option>
  <ion-option></ion-option>
</ion-select>

console.log(something) and I will got 3 ?

Thanks.

2
angularionic2
Why do you need to count them ? I am asking this maybe to find a workaround – carton

2 Answers

2
votes

[EDIT] Sorry for my last answer which was wrong.

You can also use Viewchild to access to the dom element if you don't want to use document.getElementById('mySelect')

So the solution with ViewChild

myPage.html

 <ion-select #mySelect>
     <ion-option>Bacon</ion-option>
    <ion-option>Black Olives</ion-option>
    <ion-option>Extra Cheese</ion-option>
    <ion-option>Mushrooms</ion-option>
    <ion-option>Pepperoni</ion-option>
    <ion-option>Sausage</ion-option>
 </ion-select>

First use it in your components:

import { Component,ViewChild } from '@angular/core';

Then Declare your variable: 

@ViewChild('mySelect') selectDom;

 ionViewDidLoad(){
      console.log(this.selectDom._options.length); // = 6 in my case
  }
0
votes

Something like

 @ViewChildren('ion-option')
  ionOptions: QueryList<any>;

and then 

ionOptions.length;