Modals Ionic | Todo lo que necesitas saber

¿Quieres aprender cómo se usan las ventanas modales, o modals, en Ionic? O, tal vez, ya sabes lo que es y estás buscando cómo funciona algún campo o lo que hace alguna de sus funciones ¿verdad?

Si la respuesta es afirmativa a cualquiera de estas cuestiones, o posible derivadas de ellas, puedes estar tranquilo. Hasta el desarrollador más experimentado tiene que revisar este tipo de contenido más de 2 veces cuando está usando Ionic. Es más, yo mismo lo hago con bastante asiduidad cuando uso este framework.

Por cierto, y por si no sabes quién soy 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 backend para dichas apps, y en el artículo de hoy te voy a enseñar cómo puedes comenzar a usar este componente, los modales de Ionic, de una manera práctica, sencilla e intuitiva así que no te lo puedes perder ¡vamos al lío!

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.

Instalación de Modals en Ionic

Bueno, pues al tratarse de un componente de sistema, y al no acceder a funciones nativas, ion-modal ya viene instalado por defecto. Ionic da por hecho que lo vas a usar en tus aplicaciones.

Configurando el componente

Sucede lo mismo que en punto anterior. No necesita configuración previa porque ya viene instalado. Así que continuemos con lo que nos atañe ;P

Modales en Ionic, qué son y cómo se utilizan

Bueno, pues comenzamos hablando de que son los modals. En este punto tenemos que hacer poner una nota. Y es, que no son modales cómo los que tenemos en la web. En este caso, el modal se superpondrá al contenido que estemos viendo en pantalla usando toda esta.

Podríamos decir, que es cómo una vista a pantalla completa o cómo si se tratara de una página normal y corriente. Se usará un componente para la vista que contiene, y le podremos pasar parámetros de una manera muy sencilla. Pero veamos sobre código que todo se ve mejor.

Ejemplo de cómo se crea el modal

En primer lugar, y para todo aquel que tenga un poco de prisa, un ejemplo práctico vale más que mil palabras:

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';

@Component({
  selector: 'modal-example',
  templateUrl: 'modal-example.html',
  styleUrls: ['./modal-example.css']
})

export class ModalExample {

  constructor(public modalController: ModalController) {
  }

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage
    });
    return await modal.present();
  }
}

Y ahora veamos el “ModalPage” antes de continuar.

import { Component, Input } from '@angular/core';
import { NavParams } from '@ionic/angular';

@Component({
  selector: 'modal-page',
})
export class ModalPage {

  constructor() {

  }

}

Vale, hasta aquí sencillote. En primer lugar, inyectamos en el constructor una instancia de ModalController. Dicha instancia nos permitirá controlar cómo, y de que manera, vamos a mostrar dichas ventajas emergentes.

Nota: Para hacer esto, es necesario realizar un import antes, que no se nos olvide.

Y posteriormente, con el método “create”, construimos el modal que será mostrado en el ejemplo.

Cómo componente llamaremos a un puntero de la clase ModalPage. Esta clase «ModalPage» será un componente propio, como se ve en el ejemplo. No me voy a poner a explicar que es un componente aquí, porque no viene a cuento en este artículo. Si no sabes lo que es, pásate por aquí: https://ionicframework.com/docs/components

Y una vez finalizados estos pasos, llamamos a la función “present” y ya tendríamos nuestro flamante modal en nuestra pantalla.

Cómo destruir un Modal con el método dismiss

Bueno, ya hemos aprendido a crear y a mostrar Modales en nuestra app. Ahora le toca el turno a un paso igual de importante que es destruirlos. En este caso, vamos a llamarlo dismisear y lo único que hará es eliminar de la pantalla el modal.

Para tal fin, vamos a usar la función “dismiss()” sobre la instancia de nuestro modal. Y si, el modal se destruiría. Se puede usar tanto dentro de la promesa, cómo fuera, así que las posibilidades son ilimitadas.

export class ModalPage {

  ...

  dismiss() {
    // using the injected ModalController this page
    // can "dismiss" itself and optionally pass back data
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }
}

Pero antes de terminar de pasar por aquí déjame que te aclare que podemos recuperar datos que queramos enviar desde el modal cuando lo cerramos hacia la instancia que lo ha abierto de la siguiente manera:

const { data } = await modal.onWillDismiss();
console.log(data);

Y funciona tanto con “onWillDismiss” que con “onDidDismiss”.

Cómo pasar variables a mis modals en Ionic

Otra de las ideas más comunes que se te puede venir a la cabeza, es cómo puedo pasar datos mi modal. Y esto es lo que vamos a ver ahora, algo sencillo, práctico y muy intuitivo. Veamos un ejemplo primero:

async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    componentProps: {
      'nombre': 'Aitor',
      'apellidos': 'Sánchez',
      'locale': 'es_ES'
    }
  });
  return await modal.present();
}

En el caso en cuestión, usaremos “componentProps”. Que es, ni más ni menos, que un objeto para pasarle datos, en esta caso de una persona, a nuestros modals page. Estamos utilizando también el “ModalPage” que hemos usado en el ejemplo anterior.

Y así quedaría listo el ejemplo. Si quisiéramos enviar más, pues metemos más parámetros. Y listo 🙂

Cómo recuperar datos desde un Ionic modal

Pues para conseguir recuperar los datos desde un modal que hemos lanzado previamente, cómo hemos visto en el ejemplo anterior. Tenemos dos opciones.

La primera, y más sencilla, es utilizar la clase “NavParams”. Los datos los podremos recuperar de la siguiente manera:

export class ModalPage {

  constructor(navParams: NavParams) {
    console.log(navParams.get('nombre'));
    console.log(navParams.get('apellidos'));
    console.log(navParams.get('locale'));
  }

}

O bien podemos usar el decorado “@input” que nos dará acceso a lo que nos lleva con el nombre de la variable cómo lo vemos a continuación:

export class ModalPage {

  // Data passed in by componentProps

  @Input() firstName: string;
  @Input() lastName: string;
  @Input() middleInitial: string;

  constructor() {

  }

}

Pues hasta aquí hemos llegado con la explicación y los ejemplo. Ahora vamos a pasar a ver un poco más de chicha. Por chicha nos referimos a las propiedades, los eventos, los métodos y las propiedades CSS. Adelante…

Propiedades de las ventanas modales

• Animated
  • Si es verdadero, el modal se animará al aparecer y al eliminarse.
  • Atributo -> animated.
  • Tipo -> booleano.
  • Por defecto -> true
• backdropDismiss
  • Si es verdadero, el modal podrá cerrarse pulsando fuera de él.
  • Atributo -> backdrop-dismiss
  • Tipo -> Booleano
  • Default -> true
• Component
  • El componente que será mostrado dentro del modal.
  • Atributo -> component
  • Tipo -> Function | HTMLElement | null | string
• componentProps
  • Los datos que vas a pasar al modal en un objeto de pares “ key = >val ”.
  • Atributo -> Se asignará desde el código TS en la construcción.
  • Tipo -> undefined | { [key: string]: any; }
• cssClass
  • Clases adicionales para aplicarle al componente. Si quieres poner más de una clase hay que separarlas por espacios o enviar un array de Strings.
  • Atributo -> css-class.
  • Tipo -> string | string[] | undefined
• enterAnimation
  • La animación que vamos a usar cuando se presente el modal.
  • Tipo -> Será una promesa con la siguiente nomenclatura:
    • ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
    • Nos llegará la animación terminada para que podamos continuar.
• keyboardClose
  • Si es verdadero, el teclado se esconderá cuando el modal sea mostrado.
  • Atributo -> keyboard-close
  • Tipo -> Booleano
  • Por defecto -> true
• leaveAnimation
  • La animación que se va a utilizar cuando el modal se elimina.
  • Tipo -> Será una promesa que tendrá la siguiente nomenclatura:
    • ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
    • Nos llegará la animación con el resultado.
  • mode
    • El mode determina qué estilos de plataforma usar.
    • Atributo -> mode.
    • Tipo -> “ios” | “md”.
• showBackdrop
  • SI es verdadero, muestra un fondo detrás del modal.
  • Atributo -> show-backdrop
  • Tipo -> Booleano
  • Por defecto -> true

Eventos de los modals

Bueno, pues llegados a este punto, quizás se está haciendo un poco pesado el tutorial. Pero bueno, ya queda menos. Solo te pido un poco más de tu tiempo, no te arrepentirás.

Ahora vamos a ver los disparadores, o listeners, cómo quieras llamarlos. Que, al fin y al cabo, son los eventos que disparan los usuarios al interactuar con el modal. Vamos a ello…

• ionModalDidDismiss -> Se emite después de que el modal se haya destruido.
• ionModalDidPresent -> Emitido después de que el modal se haya mostrado.
• ionModalWillDismiss -> Se emite antes de que el modal vaya a ser destruido.
• ionModalWillPresent -> Emitido antes de que el modal vaya a ser mostrado.

Cómo digo en todos los tutos, no voy a meter los eventos de los padres de la clase. No tendría sentido.

La verdad que no son muchos, es lógico. Si lo piensas un poquito, dime que más opciones de eventos puede tener, ¡propias eh! No me vengan con el Swipe, que ya lo tiene el padre.

Y con esto pasamos a la última sección. Los métodos de clase, comenzamos…

Métodos de Ion-modal

• Dismiss
  • Destruye el modal que tenemos en pantalla. Si no está no hace nada.
  • dismiss(data?: any, role?: string | undefined)
  • Devuelve una promesa que tenemos que controlar. En ella llega un booleano que nos permite definir si se ha realizado correctamente.
• onDidDismiss
  • Nos permite suscribirnos al evento desde código.
  • onDidDismiss()
  • Devuelve una promesa que contiene una instancia de “OverlayEventDetail” Que se resolverá cuando el modal haya sido destruido.
• onWillDismiss
  • Similar al anterior, pero se dispara antes de que el modal se muestre.
• Present
  • Presenta un modal que se ha creado previamente a través de modalController.
  • “present()”
  • Devuelve una promesa que tendremos que controlar. Aunque llega vacía, nos avisa de cuando ha terminado de mostrarse el modal.

Y estas son todas las funciones, o métodos, que nos vamos a encontrar de esta clase. Y para terminar, y acabar ya con esta pesadilla 😛 Vamos a ver las propiedades CSS. Terminemos de una vez…

Ahora, las propiedades CSS

Pues cómo en todos los componentes HTML, tenemos una variedad de opciones por las que podemos optar a la hora de darle diseño a nuestros módulos. Y, cómo en todos los tutos, vamos a verlas 🙂

• –background -> EL fondo del modal quedando por detrás del contenido componente que hemos asignado.
• –boder-color -> El color del borde.
• –border-radius -> En caso de que queramos, el redondeo del borde del modal.
• –border-style -> El estilo del borde del modal.
• –border-width -> El ancho del borde.
• –height -> El alto del modal.
• –max-height -> El alto máximo del modal.
• –max-width -> El ancho máximo del modal.
• –min-height -> El alto mínimo.
• –min-width -> El ancho mínimo.
• –width -> El ancho fijo del modal.

Cómo podrás apreciar, y cómo digo siempre, estas son las propiedades de esta clase. Luego hereda todas las del padre, cómo es lógico. Así que, si falta alguna, no lo tengas en cuenta. Seguramente esté en alguno de los padres. Revísalo, y si de verdad falta, y me lo quieres comunicar, estaré encantado de revisarlo 😛

Estilos personalizados

En caso de que estemos buscando mostrar una ventana emergente personalizada, cómo pasa  en buena parte de las aplicaciones, podemos darle al método «create» del modalController una clase CSS que nosotros hayamos creado explícitamente para este fin cómo vamos a ver ahora:

constructor (private modalController: ModalController) {
}

async openMyModal() {
  const myModal = await this.modalController.create({
    component: MyModalPage,
    cssClass: 'my-custom-modal-css'
  });
  return await myModal.present();
}

Y la clase CSS podría ser la siguiente:

.my-custom-modal-css .modal-wrapper {
   height: 20%;
   top: 80%;
   position: absolute; 
   display: block;  
}

Así, de esta manera, podríamos cambiar todos los atributos que nosotros veamos oportunos. El size, el width, el color, etc… Así supliríamos las posibles carencias que pudiese tener el punto anterior para adaptarse a nuestras necesidades.

Más contenidos del curso:

Intercom Ionic | Qué es y cómo puedes utilizarlo

¿Interesado en implementar la api Intercom Ionic en tu aplicación? O, quizás Continuar leyendo

Google Analytics Ionic | Aprende a usarlo cómo un pro

¿Pensando en añadir algún sistema de seguimiento de usuarios en tu app? Continuar leyendo

Y para terminar, el tutorial en vídeo

Bueno, pues hasta aquí hemos llegado lector/a. Si te ha gustado el tutorial, te invito a que te suscribas al círculo, si no lo has hecho ya, te prometo que no te vas a arrepentir.

Solo queda despedirme hasta el siguiente artículo. Hasta entonces, que vaya bien 🙂