New to Kendo UI for Angular? Start a free 30-day trial

Hiding

You can hide the Notification by defining a delay period before the hiding occurs or by defining a closable Notification component.

Defining a Delay before Hiding

To hide the Notification after a specific time period, set the hideAfter property of the NotificationSettings to the desired milliseconds.

public show(): void {
    this.notificationService.show({
        ...
        hideAfter: 2000,
    });
}

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

The following example demonstrates how to show an auto-hiding Notification to quickly notify the user about a successful operation.

Change Theme

Theme

Loading ...

Defining a Closable Notification

To render a dedicated Close button in the Notification content and prevent auto-hiding behavior, set the closable property of the NotificationSettingsto true.

public show(): void {
    this.notificationService.show({
        ...
        closable: true,
    });
}

The afterHide subscription allows you to execute some functionality after the Notification instance is hidden and the hide animation is over.

The following example demonstrates how to show a closable Notification.