Aitor Sánchez - Blog - Oct. 26, 2023, 5:32 p.m.
¿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.
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.
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.
Tampoco, no es necesaria ninguna configuración para usarlo. Como he dicho en el párrafo anterior, solo hay que usarlo y chinpún.
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”.
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.
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
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 :)
Vale, para hacer esto tenemos varias maneras de hacerlo.
<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>
<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)
Al tratarse de un componente simple, tenemos dos funciones principales para él.
Por otro lado, tenemos 3 fields que tenemos que mencionar aquí
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:
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.
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:
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!