Checkbox Ionic – De principiante a avanzado

¿Quieres aprender cómo se usan los Ionic Checkbox en tus apps/webs? O, talvez, lo que necesitas es conocer alguno de sus detalles más avanzados cómo sus listeners o funciones ¿verdad? Si la respuesta es sí a cualquiera de estas preguntas, o preguntas derivadas de ellas, déjame decirte que no estás solo. En su mayoría, los desarrolladores (en los que me incluyo) necesitamos de este tipo de artículos para avanzar en nuestros desarrollos.

Por si no me conoces aún, mi nombre es Aitor Sánchez González y soy desarrollador de software desde el año 2014. Me especializo en apps móviles, y en servicios de back end para estas, y en el artículo de hoy vamos a ver cómo puedes, de una manera sencilla, práctica y con ejemplos, utilizar dicho componente en tus apps móviles hechas con Ionic Framework.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

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.

Más contenido del curso:

Exoplayer Ionic | Qué es y cómo se utiliza e implementa

¿Quieres saber cómo implementar Exoplayer Ionic en tu aplicación móvil? O, quizás, Continuar leyendo

Status Bar Ionic | ¡Aprende a usarla cómo un profesional!

¿Buscando modificar la barra de estado del dispositivo desde tu app? O, Continuar leyendo

Fingerprint Ionic | Todo lo que debes saber aquí

¿Pensando en implementar algún sistema de autentificación biométrica dentro de tu aplicación? Continuar leyendo

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:

Como expliqué al comienzo del artículo, este es un componente que no tiene mucho misterio en su uso. Sí que podríamos ver los eventos a los que lo podemos enganchar y demás. Pero eso irá en otra parte del curso. Donde veremos bien cómo podemos suscribirnos a estos eventos (onClick, onChange, etc…) y poder tratar los datos que nos llegan para poder hacer cosas aún más chulas.

Si tienes cualquier duda, consulta, lo que sea que te pueda ayudar, déjamelo en los comentarios y te contestaré lo antes posible. Quiero que este blog se convierta en un referente del sector en habla hispana. Así que no tengas miedo, te voy a contestar seguro. Lo juro 🙂

Un saludo lector, nos vemos en el siguiente artículo.