Hi,
I'd like to request a feature for programmatically dismissing notifications in Angular. This is a common feature for notification / toast component, but it is missing in Kendo UI for Angular.
Right now, once a closable notification is shown, there's no way to dismiss it programmatically, which can lead to clutter (see attached screenshot).
Here are the proposed features:
Programmatic Notification Dismissal:
Global Notification Limit:
These additions would greatly enhance the user experience by preventing notification clutter and providing better control for developers.
Thanks for considering this!
Best, Sergei.
Hello Sergei,
Thank you very much for the details provided.
I will address the requests in numerical order so that it is easier for you to keep track of the response.
Generally speaking, the Notification, and more precisely the NotificationRef interface that holds the references to the object instance of the Notification, provides a designated built-in hide() method that hides and destroys the Notification:
https://www.telerik.com/kendo-angular-ui/components/notification/api/NotificationRef/#toc-hide
This means that the developer can store all instances of the Notification in an array(or other collection) and use this collection together with the hide() method to programmatically hide the desired components.
To better illustrate this approach, I am sending you a StackBlitz demo that implements it:
https://stackblitz.com/edit/angular-hnzsje-zwasgv
Please, keep in mind that the demo aims to point the developer in the right direction but might need some additional customizations in order to comply with the case-specific requirements which are considered the developer's effort.
One possible approach to set a global limit for the number of Notifications rendered on the page would be for the developer to store the count of the currently opened components and manually prevent the creation of new ones if this count exceeds the desired limit. To ensure that the count is updated once a Notification is being closed, the developer can subscribe to the afterHide observable:
https://www.telerik.com/kendo-angular-ui/components/notification/api/NotificationRef/#toc-afterhide
if (this.counter < this.limit) {
this.counter++;
this.notificationRef = this.notificationService.show({
content: 'Your data has been saved. Time for tea!',
...
});
this.notificationRef.afterHide.subscribe(() => {
this.counter--;
});
}
For your convenience, here is a StackBlitz demo showcasing such an approach:
https://stackblitz.com/edit/angular-hnzsje
I hope the provided information helps. Please, let me know if I am missing out on something.
Regards,
Georgi
Progress Telerik
Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024