Prevent duplicate Toast messages in Ionic

user_4865536 0
Viewed 3864

I have implemented toast using ToastController in my ionic2 project . Currently i am facing an issue with the duplicate toast messages . Is there any way to prevent the duplication / overlapping of toast message in ionic2 / angular2

(NB : Duplication means when I click on a button I am displaying a toast , if I click on the same button multiple times the toast messages overlaps ) ?

code

export class <className>{
   constructor(private toast:ToastController){
   }
    showToast(message) {
    let toast = this.toastCtrl.create({
        message: message,
        duration: 2000,
        position: 'bottom'
    })
    toast.present();
   }
}

I am calling this method on an button click .

Edited

  1. with duplicates toast (taken example using toastr , same sitaution is for me) enter image description here

  2. when i enable "prevent notification" , the duplicate toast are not there within the timeout duration . enter image description here

Any help is much appreciated.

ionic2 ionic5 ionic3 angular typescript
3 Answers

I set preventDuplicates to 1 in my toastr.js file, please see below;

function p() {
    return {
        tapToDismiss: !0,
        toastClass: "toast",
        containerId: "toast-container",
        debug: !1,
        showMethod: "fadeIn",
        showDuration: 300,
        showEasing: "swing",
        onShown: void 0,
        hideMethod: "fadeOut",
        hideDuration: 1e3,
        hideEasing: "swing",
        onHidden: void 0,
        closeMethod: !1,
        closeDuration: !1,
        closeEasing: !1,
        closeOnHover: !0,
        extendedTimeOut: 1e3,
        iconClasses: {
            error: "toast-error",
            info: "toast-info",
            success: "toast-success",
            warning: "toast-warning"
        },
        iconClass: "toast-info",
        positionClass: "toast-top-right",
        timeOut: 2e3,
        titleClass: "toast-title",
        messageClass: "toast-message",
        escapeHtml: !1,
        target: "body",
        // closeButton: true,
        closeHtml: '<button type="button">&times;</button>',
        closeClass: "toast-close-button",
        newestOnTop: !0,
        preventDuplicates: 1,
        progressBar: 1,
        progressClass: "toast-progress",
        rtl: !1
    }
}
user_91837610 
var elems = document.querySelectorAll("ion-toast");
if (elems.length > 0) {
    for (var j = 0; j < elems.length; j++) {
        elems[j].style.transform = "translateY(" + j * 65 + "px)";
    }
}
user_190416680
Related