Declined
Last Updated: 05 Aug 2024 12:43 by ADMIN
Sergei
Created on: 29 Jul 2024 19:47
Category: Kendo UI for Angular
Type: Feature Request
0
Allow to dismiss the notifications programmatically and set a limit of how many notifications allowed to be shown

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:

  1. Programmatic Notification Dismissal:

    • Dismiss by type
    • Dismiss by ID
    • Dismiss all
  2. Global Notification Limit:

    • Set a global limit for how many notifications can be displayed at once.

These additions would greatly enhance the user experience by preventing notification clutter and providing better control for developers.

Thanks for considering this!

Best, Sergei.

1 comment
ADMIN
Georgi
Posted on: 05 Aug 2024 12:43

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.

1. Programmatic Control

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.

2. Global Limit

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