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.

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { NotificationService } 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 {
        this.notificationService.show({
            content: this.notificationTemplate,
            animation: { type: 'slide', duration: 800 },
            position: { horizontal: 'right', vertical: 'top' },
            type: { style: 'error', icon: true },
            closable: true
        });
    }
}

In this article