Proper way to handle toast notifications in Ionic app

Question

I have an Ionic 2 app that has toast notifications in various places.

A good example of this is where the user updates their profile on the app and I run some validation checks. If the user fails some validation I might call the following:

      let toast = this.toastCtrl.create({
        message: 'Sorry, your password must be at least 6 characters long.  Your account was not updated.',
        duration: 3000,
        position: 'top'
      });
      toast.present();

No problems there. It just displays for 3 seconds then disappears.

The problem comes when multiple are shown at once. For example, the user may type a 6 character password, but it doesn't validate for another reason, so another toast notification is raised:

    let toast = this.toastCtrl.create({
      message: 'Sorry, your passwords do not match.  Your account was not updated.',
      duration: 3000,
      position: 'top'
    });
    toast.present();

This causes 2 toasts to overlap and one will permanently remain. The two overlapping isn't an issue, but the fact one remains indefinitely is a huge issue.

I imagine this is because I'm effectively overwriting the toast variable every time.

What is the best way to approach this? I don't want to have toast1, toast2, etc, as that won't fix the problem because the user might launch the same toast notification twice (<6 character password, submit twice).

Answer 1

I would suggest handling all Toast interactions in a service. And inject it in whatever component/page/service you need it in. In the service you keep a reference to a single Toast and call dismiss() on it before presenting it. This solution will keep you from having more than one Toast presented at a time.

ToastService:

import { Injectable } from '@angular/core';
import { ToastController, Toast } from 'ionic-angular';

@Injectable()
export class ToastService{
    toast: Toast = null;

    constructor(private toastCtrl: ToastController){ }

    presentToast(text:string):void{
        let toastData = {
            message: text,
            duration: 3000,
            position: 'top'
        }

        this.showToast(toastData);
    }

    presentClosableToast(text:string):void{
        let toastData = {
            message: text,
            showCloseButton: true,
            closeButtonText: 'X',
            position: 'top' 
        };

        this.showToast(toastData);
    }

    private showToast(data:any):void{
        this.toast ? this.toast.dismiss() : false;
        this.toast = this.toastCtrl.create(data);
        this.toast.present();
    }
}