Components / Notification

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 that is measured in milliseconds, pass a hideAfter duration value to the NotificationService.show method. When the closable property is set to true, the hideAfter property is ignored.

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

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

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template>
        Success! I will hide automatically after <strong>{{ hideAfter }}</strong> milliseconds.
    </ng-template>
    <button class="k-button" (click)="show()">Show</button>
  `
})
class AppComponent {
    @ViewChild('template', { read: TemplateRef })
    public notificationTemplate: TemplateRef<any>;

    private hideAfter: number = 2000;

    constructor(private notificationService: NotificationService) {}

    public show(): void {
        this.notificationService.show({
            content: this.notificationTemplate,
            position: { horizontal: 'right', vertical: 'top' },
            animation: { type: 'fade', duration: 800 },
            type: { style: 'success', icon: true },
            hideAfter: this.hideAfter
        });
    }
}

Defining a Closable Notification

To render a dedicated Close button in the Notification content and prevent auto-hiding behavior, set the closable property that is passed to the NotificationService.show method to true.

The following example demonstrates how to show a closable Notification to catch the user attention when, for example, an error has occurred during the execution of the application. The afterHide subscription allows you to execute some functionality after the Notification instance is hidden and the hide animation is over.

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

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template>
        Error! I will hide after you click the 'Close' button.
    </ng-template>
    <button class="k-button" (click)="show()">Show</button>
  `
})
class AppComponent {
    @ViewChild('template', { read: TemplateRef })
    public notificationTemplate: TemplateRef<any>;

    constructor(private notificationService: NotificationService) {}

    public show(): void {
        const notification: NotificationRef = this.notificationService.show({
            content: this.notificationTemplate,
            animation: { type: 'slide', duration: 800 },
            position: { horizontal: 'right', vertical: 'top' },
            type: { style: 'error', icon: true },
            closable: true
        });

        notification.afterHide.subscribe(() => console.log('hidden'));
    }
}

In this article