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
    });

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 this reference the * marked properties are at configuration level,rest others you can override on individual toast. [ngToast](http://tamerayd.in/ngToast/#) — NeverGiveUp161, Mar 28 '18 at 21:29

score 3 · Answer 1 · answered Sep 12 '17 at 05:23

3

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.

answered Sep 12 '17 at 05:23

skm

1,192
1
11
23

1

This is what I came for. Dismiss all or dismiss one particular message. – Tony Brasunas Apr 24 '19 at 21:59
It's this.toastr.clear(); these days :- As of today ** 2022 ** – James Ikubi Jun 15 '22 at 13:42

score 3 · Accepted Answer · answered Sep 12 '17 at 05:24

3

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'
 });

answered Sep 12 '17 at 05:24

Ash

2,575
2
19
27

1

Thanks. Works Well :) – Divya Sep 12 '17 at 05:35

score 1 · Answer 3 · answered Mar 28 '18 at 21:36

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'
  });
}]);

Angular - ngToast clear all previous toasts and show only one

3 Answers3