Angular - ngToast clear all previous toasts and show only one

Question

I am using Angular ngToast. I am trying to show only one toast at a time. The previously displayed toast should be hidden before displaying a new toast.There should be only one toast at a time. I tried be specifying maxNumber but doesn't work.

ngToast.create({
        className: 'info',
        content: ' New Toast',
        maxNumber: 1
        //autoDismiss: true,
        //maxOpened: 1
        //timeout: 500,
        //preventDuplicates: true,
        //preventOpenDuplicates: true
        //dismissOnClick:true
        //clickToClose: true
    });

Answer 1

Here is a fiddle that might help you: https://jsfiddle.net/774a9dq4/5/

The only difference here is that before calling the new instance of toast object, just call the dismiss() which will be dismissing ALL the toast instances in DOM.

ngToast.dismiss();
ngToast.create({
       content:'I am unique <3'
 });

Answer 2

Hope this may help:

Use the ngToast.dismiss() to clear all toasts.

Or

ngToast.dismiss(yourToastMsg) to clear a particular toast.

For more details refer to this link.

Answer 3

The above answers are the easy quick one,but if you wan to take total control of your toastr config you need to take the below approach.

Why maxNumber:1 did not work is because this is available at only configuration level, So if you want to override those values you need to inject the config file while bootstrapping your application and override the maxNumber property.As described in the reference the * marked properties are at configuration level,rest others you can override on individual toast. ngToast

Something like this would work for you inject config to ngToast

app.config(['ngToastProvider', function(ngToastProvider) {
  ngToastProvider.configure({
    additionalClasses: 'my-animation'
  });
}]);