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
You can’t perform that action at this time.