How to hide a particular toast when multiple toasts are generated

[Tuariq]

Hi Team,

I have an 'ejs-toast' element placed in html and its reference fetched inside ts file. I use show() of ToastComponent to show multiple toasts.

I have a requirement where I generate n no of toasts with some unique id. When generating new toast, if a toast with same id already exists on UI, I need to first close that very particular toast and then generate a new.

I have hide() available but no documentation is provided how to use it to hide a particular toast item? 'All' can be passed but it will hide all the toasts which is not needed.

I have attached a simulated project for better understanding.

Thanks

Tuariq

Attachment: toast_bf1f026b.zip

[Buvana Sathasivam]

Hi Tuariq,

Greetings from Syncfusion support.

By default, a unique ID is automatically generated based on the show method called in the Toast component. Please find the below screenshot for your reference.

Your shared code passed the id attribute inside the Toast show method. But, in our Toast component, it does not have an id attribute inside the show method and an automatically generated id based on the show method. Based on the content, we suggest removing the duplicate toast. In the below sample, we have compared the already created toast content with the current need to create the toast content using the beforeOpen event. If it's already been created, remove the already created toast and generate a new one.

app.component.html

<ejs-toast #element [position]='position' (beforeOpen)="onBeforeOpen($event)">

</ejs-toast>

app.component.ts

  onBeforeOpen(e: ToastBeforeOpenArgs) {

    for (let i =0; i < this.element.element.querySelectorAll('.e-toast-content').length; i++) {

         if (e.options?.content == this.element.element.querySelectorAll('.e-toast-content')[i].innerHTML) {

          this.element.element.querySelectorAll('.e-toast')[i].remove();

         }

    }

  }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Toast411196788

You can also prevent the duplicate creation of the Toast component. Please see below for the documentation.

Documentation: https://ej2.syncfusion.com/angular/documentation/toast/how-to/prevent-duplicate-toast-display/

Please let us know if you have any other concerns.

Regards,

Buvana S