Cómo implementar Toast en Ionic 2 con ToastController

Si has llegado hasta aquí ya sabrás que un Toast es una breve notificación que se usa comúnmente en las aplicaciones, digamos que es un mensajito de alerta poco molesto.

Se usa comúnmente para proporcionar retroalimentación con el usuario e indicar al usuario sobre el estado de una tarea en particular o simplemente para mostrar un mensaje no muy intrusivo, un aviso , etc.

Toast se puede mostrar en la parte superior de la pantalla, en el medio o en el área inferior.

En la imagen se muestra en la parte inferior de una aplicación que monté cacharreando con Ionic.

Para mostrar esto solo tienes que seguir los siguientes pasos en tu aplicación ionic 2.

Importa ToastController desde Ionic Angular al componente en el que estás implementando el aviso.
Esto lo haríamos así:

import { ToastController } from 'ionic-angular';

Ahora vamos poner el constructor de ToastController en el constructor de clases de tu componente.

constructor(private myToastCtrl: ToastController) {}

Después insertamos toastcontroller en nuestro constructor de componentes, solo tenemos que copiar y pegar el código fuente a continuación en su clase de componente, para mostrar un mensaje de 3 segundos en su aplicación ionic2.

presentMyToast() {
 
  let toast = this.myToastCtrl.create({
    message: 'Toast Displayed Successfully! yay!!',
    duration: 3000,
    position: 'top'
  });
 
  toast.onDidDismiss(() => {
    console.log('toast Dismissed');
  });
 
  toast.present();
}

Cómo funciona el código anterior

Cuando se llama al método presenteMyToast () , se crea un mensaje con ” this.myToastCtrl.create () “, con el mensaje que hayas configurado , la duración, y la posición que estará puesto arriba.

” Toast.present () ” muestra el mensaje rápido en nuestra aplicación , y despues llama ” toast.onDidDismiss () ” que hará que desaparezca el mensaje.

Opciones avanzadas de ToastController

message: El mensaje que se muestra en en mensaje toma una cadena como tipo. El tipo predeterminado es cadena.

duration: Milisegundos para esperar antes de ocultar el mensaje actual. El tipo predeterminado es cadena.

position: donde debería aparecer la tostada en la pantalla. El tipo predeterminado es cadena.

cssClass: para agregar estilo personalizado a las tostadas. El tipo predeterminado es cadena.

showCloseButton: utilizado para mostrar el botón de cerrar en el mensaje. por defecto irá a falso

closeButtonText: Texto para mostrar en el botón de cerrar, la opción por defecto “showCloseButton” está establecida en verdadero.

dismissOnPageChange: si se cierra el mensaje cuando se navega a otra página / pantalla.

Cómo lo ejecuto desde la aplicación

Pues fácil, solo tienes que llamar a la función presentMyToast() en el elemento o evento que quieras, y así mostrará el mensaje directamente en tu app.

presentMyToast()

Y listo, espero que te haya sido útil.