Proper way to handle toast notifications in Ionic app

Viewed 6139

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).

2 Answers
Related