Checkbox Ionic - De principiante a avanzado

¿Intentando colocar unos Ionic Checkbox en tus apps? O, talvez, lo que necesitas es conocer alguno de sus detalles más avanzados cómo sus listeners o funciones ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en el artículo de hoy aprenderás, de una manera sencilla, práctica y con ejemplos, a utilizar dicho componente en tus apps.

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.

Checkbox en Ionic, qué son y cómo puedes utilizarlas

Para comenzar, este es un componente genérico que viene por defecto incluido en las librerías gráficas de cualquier sistema de desarrollo de software. Por si no lo sabías, es la típica casilla de verificación que utilizamos a diario en mil y una webs o aplicaciones. También cabe mencionar que los checkbox en ionic son los mismo que en Angular. Al fin y al cabo, es el mismo sistema de codificación, pero adaptado para aplicaciones / apps móviles.

Su uso es realmente sencillo, no tenemos que importar nada a nuestro archivo app.module.ts como pasa con la mayoría de los componentes. Basta con que usemos sus etiquetas HTML y listo. Ya disponemos de un Checkbox en nuestra aplicación.

Nota importante: Para que un checkbox funcione correctamente (en Ionic) siempre tendrá que ir dentro de un "ion-item". Si no el track de eventos del componente no funcionará bien.

<ion-item>
  <ion-label>Pepperoni</ion-label>
  <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
</ion-item>

Ahí tenemos la construcción. Me gustaría que lo probases en una aplicación tuya, si es que no lo has hecho aún. Te recuerdo, que como mejor se aprende a programar es picando código, no solo leyendo. Yo estoy tremendamente alagado de que esté aquí, conmigo, mano a mano. Pero me gusta mucho más aún que aprendas lo que yo te quiero enseñar. Así que, por favor, sigue este consejo y llegarás muy lejos. Si solo te paras o leer y leer nunca terminarás de aprender cómo se hacen las cosas.

Input properties, o propiedades, de los ion checkbox

Genial, pues llegados hasta aquí solo tengo que decirte que este componente solo tiene una propiedad de entrada. "Checked" y sirve, básicamente, para saber si está activo, o no, el checkbox.

Nota: Recuerdo que estos atributos son propios del componente. Al heredar de componentes padre también heredamos sus atributos. Por esta razón, tienes acceso a muchos más.

NgModel e ionChange de un Checkbox en Ionic

Antes de continuar, veamos una composición completa y funcional del componente.

<ion-item>
  <ion-label>Cucumber</ion-label>
  <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox>
</ion-item>

Ahora pasamos a explicar un poquito:

• La variable que le hemos asignado en el ngModel cambiará de estado "false" a "true", y viceversa, al seleccionar / checked o deseleccionar / unchecked el elemento.
• El evento "(ionChange)" se ejecutará cuando el estado del input haya cambiado de valor / value.

Continuamos con un ejemplo de código funcional:

@Component({
  templateUrl: 'main.html'
})
class SaladPage {
  cucumber: boolean;

  updateCucumber() {
    console.log('Nuevo estado:' + this.cucumber);
  }
}

Esté código imprimirá en la consola el estado en el que está el botón a tiempo real. Hemos tomado como referencia el código HTML anterior.

Y ahora vamos a ver, el que quizás será, el punto más importante de este mini tutorial.

Estilos de un ion checkbox en Sass / Css

Estas son las hojas predefinidas que vienen asignadas por defecto a este componente. En ella se engloban colores / colors, formas, iconos / icons, márgenes / margin, paddings, alineación / alignment, etc... todo lo que hace que el componente se vea como se ve...

Para Apple / iOS

Pues más o menos estás son todas las de la manzana.

Para Android y aplicaciones web

Por otro lado, las de Android las han excluido en la última versión. Como material design es del propio Google han decidido incluir estás en este sistema operativo. También tengo que decir que son los estilos que utiliza Ionic si compilas aplicaciones para navegador. Aquí las tenéis.

Ejemplos de código

Ahora vamos a ver unos ejemplos de código que algunos usuarios me han pedido que hable de ellos. ¡Ok, adelante!

Checkbox ionic array

Muchos me habéis solicitado que explique cómo puedo poner "checkbox ionic array" en un proyecto. Pues vamos a verlo.

En primer lugar, deberíamos tener una clase que incluya un parámetro que sea booleano. Vamos a poner el ejemplo de un usuario que debe tener un estado "activado" de confirmación por mail. La construcción de la clase os la dejo a vosotros. Vamos a ver lo que nos incumbe que si no esto se hace inmenso.

Por otro lado, debéis tener los objetos cargados en memoria (array relleno) para poder interactuar con ella. Y ahora sí, vamos a ver el ejemplo html:

<ion-list>
    <ion-item *ngFor="let item of usuario">
         ...
         <ion-label>{{ usuario.nombre }}</ion-label>
         <ion-checkbox color="dark" [(ngModel)]="{{usuario.activo}}"></ion-checkbox>
         ...
    </ion-item>
</ion-list>

¿Habéis visto que sencillo es? Ale, ya tienes a tu disposición un "checkbox ionic array" con el que puedes interactuar. También decir que puedes cambiar el valor de cada uno al estar vinculado / binding a un ngModel, al hacerlo cambiará el valor de ese usuario a tiempo real.

Si quisiéramos darle un valor inicial / default value, solo tendríamos que hacerlo de la siguiente manera:

<ion-list>
    <ion-item *ngFor="let item of usuario">
         ...
         <ion-label>{{ usuario.nombre }}</ion-label>
         <ion-checkbox color="dark" [(ngModel)]="{{usuario.activo}}" checked="{{usuario.activo}}"></ion-checkbox>
         ...
    </ion-item>
</ion-list>

Si te fijas, hemos incluido la propiedad checked en estas líneas. Así cuando el componente se muestre por primera vez en pantalla, en caso de que el valor sea verdadero, se verá checked.

Ionic checkbox alert

Bien, al igual que cualquier otro componente, los checkbox pueden incluirse dentro de una alert cuando lo estás construyendo. Aquí tienes el artículo donde explico, también de manera clara y con ejemplo, cómo puedes hacer uso de este otro componente y meter tus checkbox dentro de una ventana modal.

Y el tutorial en video para los más perezosos

Si eres de los que le da pereza leer. Aquí te dejo un vídeo en el que podrás ilustrarte si no te ha quedado claro del todo lo que hemos explicado más arriba:

Una cosa más que tal vez te interesa

Mira, el logo de tu app es una parte muy importante para aumentar la visibilidad, la descargas y el dinero que genera tu aplicación. Esto es porque es la puerta de entrada desde el listado a la ficha y nosotros hemos hecho una herramienta para mejorarlo. Imagina entender que le hace falta a tu logo para estar entre los logos de las mejores apps. Pues aquí puedes hacerlo. No te espoileo más.

Y ahora si, ya nos despedimos. Nos vemos en el siguiente artículo. ¡Hasta entonces, que vaya bien!