P-Toast close single toast not supported currently with custom requirements
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
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.
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];