primeng icon indicating copy to clipboard operation
primeng copied to clipboard

P-Toast close single toast not supported currently with custom requirements

Open kbpoh opened this issue 1 month ago • 1 comments

Describe the bug

Hi team,

We have custom requirements to have a button in p-toast that does some action and close the toast afterwhich. Managed to do so with ng-template, but however we realise we are unable to close the specific p-toast due to the limitations of messageService and p-toast inputs.

Attempts:

  • Using messageService.clear() clears every toast, where in my scenario there could be multiple toasts displayed at the same time and shouldn't close all.
  • Understand you can feed in an id in .clear(), but that's with a key in the , which I cant statically create toasts at compile time with keys as it is API/event triggered -> Create new toast. Further more, using a @for to create multiple p-toast with key as a variable dynamically doesn't works as well
  • There is only a subscription for messageObserver but I can't find any use case to it to create my p-toasts

Kindly suggest any workarounds or other similar UI component that might be relevant so I can suggest to my team as an alternative. Thank you! I am also aware of the default close button in each p-toast, but it will be better if our custom button can close the corresponding toast at the same time to reduce effort. Wondering if we can leverage on that too and expose it to us too...

Pull Request Link

No response

Reason for not contributing a PR

  • [ ] Lack of time
  • [ ] Unsure how to implement the fix/feature
  • [ ] Difficulty understanding the codebase
  • [ ] Other

Other Reason

No response

Reproducer

https://stackblitz.com/github/primefaces/primeng-issue-template?file=src%2Fapp%2Fapp.component.html

Environment

NA

Angular version

19.2.19

PrimeNG version

v20

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

NA

Expected behavior

NA

kbpoh avatar Nov 21 '25 02:11 kbpoh

I would also love to be able to close the toast by id. We use the toast for a downloading process, where a large zip file is created server side. We want to close the toast once the server responds with the zip file. Multiple download toasts can be active at once, and we can't close them by their id, so we have to close all or none.

andreastorp avatar Dec 03 '25 10:12 andreastorp

Also interested

Right now, we can only close a group of notification by key, but not a single one by id

Edit : We can close specific notification by doing something like :

Template with your <toast>
...
toast = viewChild(Toast);
toast().messages = toast().messages.filter(... [ filter with your custom id];

AmbroiseS avatar Dec 11 '25 09:12 AmbroiseS