Ion Select | todo lo que debes saber

¿Pensando en incluir un Ion Select, o selector, en tu aplicación de Ionic? O, tal vez, ya sabes cómo se hace pero te falta algún detalle para sacarle todo el partido ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás a usar Ion Select en tus apps. Con sus entresijos y cosas interesantes sobre este componente.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

 

Pero ¿Qué es un Ion Select?

Pues bien, aquí no quiero explayarme mucho porque la mayoría sabréis lo que es. Si no, no estarías aquí.

Se trata, como he dicho en el primer párrafo, de un desplegable sobre el que podemos escoger varias opciones. Veamos un ejemplo, lo entenderemos mejor :)

 

 

Ahora ya lo entiendes un poco mejor ¿verdad? Pero hay una ligera diferencia con la web. Ah ¿qué no lo has notado? Nah, no me engañes.

Como puedes ver, el uso es el mismo, ahora lo verás cuando lo veamos en el código, pero la vista no es igual. De hecho, es la hostia de bonito.

 

Bien, ¿Cómo lo instalo?

Tranquilo, este componente no requiere de ninguna instalación. Simplemente lo puedes usar llamando a las etiquetas de turno que lo invocan. Ahora lo veremos en los ejemplos de uso. No te impacientes.

 

¿Hay qué configurarlo?

Tampoco, no es necesaria ninguna configuración para usarlo. Como he dicho en el párrafo anterior, solo hay que usarlo y chinpún.

 

Vale, ¿Y cómo se usa un ion-select?

Genial, ahora sí. Hemos llegado al punto que estabas esperando.

Antes de nada, un ejemplo de código sencillito para que vayas entrando en el juego:

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>
</ion-item>

 

Como siempre digo, y no me cansaré de repetirlo por diversas razones que me pasaron a mí, todos los componentes visuales que tengan un input del usuario tenemos que envolverlos en un ion-item. ¿Por qué? Pues muy sencillo. Si no lo hacemos, Ionic no capturará los eventos de entrada del usuario correctamente.

Lo más importante de este ejemplo es la etiqueta ion-select. En primer lugar, se asignamos un ngModel que será la variable que se sincronizará con el “value” de la ion-option que haya seleccionada en ese momento.

En segundo lugar, y no por ello menos importante, tenemos que rellenar nuestro select con sus respectivas options como lo haría un programador web. Para ello basta con meter todas las “ion-option” que queramos dentro del “ion-select”. Recuerda, el valor que le asignes a estas “ion-option” será el que se guarde en la variable que hemos bindeado en el ngModel del “ion-select”.

 

Valor por defecto / default value en ion select

Continuamos avanzando, ahora vamos a asignar un valor por defecto a nuestro componente. Para ello basta con que inicialicemos la variable que está bindeada a nuestro “ion-select” con el valor que queramos que se inicie (siempre y cuando esté dentro del array, o en su defecto valores, que esté en las “ion-option”s de nuestro select y sea igual que su etiqueta “value”).

Ejemplo:

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>
</ion-item>

 

En el caso de que gender fuese "f" el select tomaría como seleccionado a "Female". En caso contrario y que gender fuese"m", male seria el seleccionado.

 

Seleccionar múltiples opciones en un ion select

Esto es más de lo mismo que hemos visto antes, pero agregándole un detalle. Tenemos que asignar la propiedad “multiple=’true’” en el html de la siguiente manera:

<ion-item>
  <ion-label>Toppings</ion-label>
  <ion-select [(ngModel)]="toppings" multiple="true">
    <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>
</ion-item>

 

 

Aitor, ¿Entonces el valor de la variable bindeada ahora que contiene? Va, te leo la mente y se lo que estás pensando. Correcto, es un array de strings con los datos de los objetos seleccionados ordenados de mayor a menor aparición dentro del select.

¿Me he equivocado? Nah, soy adivino y todo. Jajaja

 

Botones de selección inferiores

Continuamos avanzando y ahora le toca el turno a los botones inferiores. Como imaginarás tenemos el botón de confirmación y el de cancelación. Estos eventos los controlaremos desde código más adelante, pero de momento quiero que sepas que podemos cambiar el texto que tienen con las propiedades “okText” y “cancelText” de la siguiente manera:

<ion-select okText="Okay" cancelText="Dismiss">
  ...
</ion-select>

 

¿Has visto que sencillo es esto? Dios, es genial :)

 

Cómo rellenamos un ionic select

Vale, para hacer esto tenemos varias maneras de hacerlo.

• Desde el html con un *ngFor
• O desde TS con una array y pasársela como parámetros “selectOptions” dentro del html.

 

Desde el html:

<ion-item>
  <ion-label>Employee</ion-label>
  <ion-select [(ngModel)]="employee" [compareWith]="compareFn">
    <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
  </ion-select>
</ion-item>

 

Desde TS:

<ion-item>
  <ion-label>Employee</ion-label>
  <ion-select [(ngModel)]="employee" [compareWith]="compareFn" ionOptions="nuestras-options">
  </ion-select>
</ion-item>

Ambas opciones son igual de buenas. Pero me quedaría con la segunda, de hecho, es la que recomienda el api. El código es más limpio y no tendremos que escribir más sobre el html, que todos sabemos el por culo que da.

Genial, pues más o menos creo que toda la parte del html está definida. Ahora vamos a pasar a lo que mola de verdad. El Ts (Por lo menos a mí, me gusta más que el html :P)

 

Funciones principales y campos.

Al tratarse de un componente simple, tenemos dos funciones principales para él.

• Open() -> Si queremos que el modal se abra desde código mediante alguna acción.
• Close() -> Si queremos que se cierre el modal por alguna causa.

Por otro lado, tenemos 3 fields que tenemos que mencionar aquí

• Config -> Es la interface que contiene la configuración del ion-select
• deepLinker -> Esto lo vamos a ver un poco más adelante.
• Options -> Contiene los ion-option del select.

 

Propiedades de entrada que podemos asignar al HTML

• cancelText -> string -> Es el texto que llevará el botón de cancelación
• compareWith -> function -> Hace una función de comparación (que tenemos que escribir nosotros) para comparar cada iteración con una determinada variable que le asignamos a esta etiqueta.
• Interface -> string -> Nos permite definir como queremos que se vea nuestro componente. Las opciones son: “action-shet”, “popover” o “alert” y por defecto viene seleccionada “alert”.
• Multiple -> boolean -> Nos permite seleccionar una opción en caso de false o varias en caso de true. Por defecto, false.
• okText -> string -> El texto que contendrá nuestro botón de confirmar.
• placeHolder -> string -> El texto que aparece como consejo si no hay nada seleccionado.
• selectOptions -> any - > Pasándole un array de strings nos permite inicializar el componente si tener que meternos en el html con, por ejemplo, un *ngFor como hemos visto más arriba.
• selectedText -> string -> El título que saldrá dentro de nuestro selector en la parte de arriba. Digamos, el texto que hay dentro de la cabecera.

 

Eventos de un ion select

Llegados a este punto, ya tienes que saber perfectamente cómo usar y configurar un ion-select. Ahora vamos a ver un detalle más, los eventos que emite este componente.

En este caso tenemos 4 y son los siguientes:

• ionCancel -> Emitido cuando el usuario cancela la selección.
• ionBlur -> Emitido cuando el select pierde el foco.
• ionChange -> Emitido cuando el valor del select cambia.
• ionFocus -> Emitido cuando el componente pilla el foco.

 

Select ionic on change o, cómo controlar el cambio de valor

Bien, aún muchos de vosotros me preguntáis cómo se controla el cambio de valor de un select. En el punto anterior hemos visto los posibles eventos que se disparan de este componente y cuando se emiten. Pero para poner las cosas un poco más facilitas, vamos a ver un ejemplo en código que siempre es mucho mejor. Aquí va:

<ion-select #C (ionChange)="onChange(C.value)">
  <!-- Aquí van nuestros ion-option -->
</ion-select>

 

Si te fijas en la parte donde se construye el select, "#C" hace referencia al mismo objeto para poder acceder a sus propiedades. Así podrás acceder a estas desde la misma etiqueta ¿entiendes? Por eso, y sin necesidad de gastar recursos con un ngModel, llamamos al método "onChange" pasándole el valor que nos llega desde el objeto "#C" cada vez que el valor del select cambia. ¿A qué es la leche?

Si no lo has entendido del todo bien, mándame un mail o ponte en contacto conmigo a través del formulario y contestaré tus dudas :)

Si te paras a pensarlo, no hace falta ningún otro. ¿Por qué? Porque si, por ejemplo, el usuario se ha dado ha “siguiente” tú ya tendrás los valores dentro de tu variable bindeada sin necesidad de escribir un “ionOkay”. Y esta es una de las razones por las que Ionic hace magia.

 

Ion-select-option en las últimas implementaciones

Con las últimas versiones del Framework (creo que desde la versión de Ionic 5) se ha ido agregando nuevas funcionalidades a este. Tanto es así, que incluso los selectores, que es lo que estamos viendo en este tutorial, también han sufrido dicha actualización. Ahora tenemos disponible una nueva etiqueta para las opciones de nuestros select que se llama ion-select-option.

El código de implementación de esta nueva etiqueta sería el siguiente:

<ion-item>
  <ion-label>Select</ion-label>
  <ion-select>
    <ion-select-option value="brown">Brown</ion-select-option>
    <ion-select-option value="blonde">Blonde</ion-select-option>
    <ion-select-option value="black">Black</ion-select-option>
    <ion-select-option value="red">Red</ion-select-option>
  </ion-select>
</ion-item>

Cómo puedes ver, cambia los "ion-option" que hemos visto en el tutorial por "ion-select-option". Aparentemente no hay nada diferente a nivel de diseño e implementación, pero, por si acaso, aquí te dejo las propiedades de este nuevo componente:

• disabled -> boolean -> default = false -> Si es verdadero, el usuario no podrá interactura con con él.
• value -> any -> El valor que le asignamos al option que luego podremos capturar cuando sea usado.

 

Y el ejemplo en video, como siempre

 

 

Algo más que quizás te interese

Mira, hemos creado una plataforma para aumentar las descargas de tu aplicación. Es inteligencia artificial para mejorar los logos de estas apps. No te quiero espoilear. Pásate por aquí y te explico lo que es.

 

Geniete, aquí hemos terminado. Nos vemos en el siguiente artículo. Hasta entonces, ¡que vaya bien!