Saltar al contenido

C贸mo implementar Toast en Ionic 2 con ToastController

ionic2

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.

toast ionic

Ionic 2 facilita la implementaci贸n de toast en la aplicaci贸n.

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.