Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Reusable Ionic Angular Toast Component
public async login(){
/* Inject the "Utility Provider" and reuse your toast component */
await this.utility.showToast(
'Login not implemented',
{position:'top', duration:10000, showCloseButton:true, closeButtonText:'OK', color:'danger'}).then(toast =>{
import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';
@Injectable({providedIn: 'root'})
export class UtilityProvider{
constructor( private toast: ToastController){}
* A custom reusable toast message
* Author: Kingsley Tagbo /
* @param header: the header / title of your toast message
* @param message: the body or main content of your toast message
* @param overrideOptions: an object with options for customizing your toast, e.g. {position: 'bottom'}
async showToast(header?: string, message?:string, overrideOptions?:any): Promise<HTMLIonToastElement>{
const toastOptions = {header, message, position:'top', duration: 6000};
const options = Object.assign(toastOptions, overrideOptions);
const result = await this.toast.create(options);
return result;

This comment has been minimized.

Copy link
Owner Author

@kingsleytagbo kingsleytagbo commented Sep 29, 2020

Reusable + Custom Ionic Angular Toast Message

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment