Hiding Closable Notifications

Environment

Product

Progress® Kendo UI Notification

Description

How can I automatically hide a Notification after few seconds when the closable property is set to true?

Solution

When setting the closable option to true, the hideAfter value is ignored by default. Read more about the hidden state of the Notification.

You can hide the Notification in this case by using a setTimeout function. Then, you can close the notification instance explicitly with the built-in hide method:

ts

public show(): void {
        const notifInstance = this.notificationService.show({
            content: 'test',
            closable: true,
			/*...*/
        });

        setTimeout(() => {
            if (notifInstance) {
                notifInstance.hide();
            }
        }, 2000);
    }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...