[Solved] Notification support for closeable and hideAfter combined

[Derek]

The hideAfter property is ignored when the closable property is set to true.

This is the current behaviour however, would like the ability to use closable and hideAfter together. So the user can close manually, or it'll eventually disappear.

Is there a reason why we want have them both working together?

https://github.com/telerik/kendo-angular/issues/2238

https://github.com/telerik/kendo-angular/issues/3049

I don't believe this is the first time requested and it would be a good feature to have.

[Derek]

https://feedback.telerik.com/kendo-angular-ui/1407103-allow-closable-notifications-with-auto-hide

[Zornitsa]

Hi Derek,

Indeed, the Notification component ignores the hideAfter setting when the closable property is set to true. As you have also found out, we have a feature request logged in our Feedback Portal regarding providing the ability to auto-hide closable Notifications as a built-in feature in the component:

• https://feedback.telerik.com/kendo-angular-ui/1407103-allow-closable-notifications-with-auto-hide 

I would suggest following the feature request to stay notified of any progress on its implementation. I can see that you have already added a vote for the item, which is great, since this will increase its customer demand and its chances of future implementation.

For the time being, to enable both auto-hide and the close icon for Kendo UI for Angular Notification, the developer would need to implement a custom approach. To be more comprehensive, you can manually hide the notification after a set duration using setTimeout and the hide() method.

Here is a concise example:

import { Component } from '@angular/core';
import { NotificationService, NotificationRef } from '@progress/kendo-angular-notification';

@Component({
  selector: 'my-app',
  template: `<button (click)="show()">Show Notification</button>`
})
export class AppComponent {
  public notificationRef: NotificationRef;

  constructor(private notificationService: NotificationService) {}

  show(): void {
    this.notificationRef = this.notificationService.show({
      content: 'Your data has been saved. Time for tea!',
      closable: true
    });

    setTimeout(() => {
      if (this.notificationRef) {
        this.notificationRef.hide();
      }
    }, 3000); // Auto-hide after 3 seconds
  }
}

With this approach, users can close the notification manually using the close icon, or it will automatically disappear after the specified timeout. For reference, here is a Knowledge Base article that explains this approach:

• https://www.telerik.com/kendo-angular-ui/components/knowledge-base/hide-closable-notification 

Let me know if you need any more details or assistance on this matter.

Regards,
Zornitsa
Progress Telerik