All Components

Types

The Notification allows you to set different types of notifications.

Each type is color-coded which allows the user to immediately recognize if the notification indicates a successful operation or an error message. To use the predefined styles for each Notification type, pass a type value to the dynamically created with the Notification Service component in the type field of the result. Based on the Notification type your project requires, you can also display an icon by specifying typeIcon: true.

The available type values are:

  • none—Renders the default styling options of the component.
  • success—Indicates a successfully completed action.
  • info—Provides neutral information about a process or an action.
  • error—Informs the user about an erroneous outcome from a process or an action.
  • warning—Warns against the occurrence of possible issues.
import { Component, ViewChild, TemplateRef } from '@angular/core';
import { NotificationService } from '@progress/kendo-angular-notification';

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template>Hi! I am {{ type.toUpperCase() }} notification.</ng-template>

    <button class="k-button" (click)="showDefault()">Show default</button>
    <button class="k-button" (click)="showSuccess()">Show success</button>
    <button class="k-button" (click)="showWarning()">Show warning</button>
    <button class="k-button" (click)="showInfo()">Show info</button>
    <button class="k-button" (click)="showError()">Show error</button>
  `
})
class AppComponent {
    @ViewChild('template', { read: TemplateRef })
    public notificationTemplate: TemplateRef<any>;

    public type: Type;

    constructor(private notificationService: NotificationService) {}

    public showDefault(): void {
        this.type = 'default';

        this.notificationService.show({
            content: this.notificationTemplate,
            hideAfter: 600,
            position: { horizontal: 'right', vertical: 'top' },
            animation: { type: 'fade', duration: 400 },
            type: { style: 'none', icon: false }
        });
    }
    public showSuccess(): void {
        this.notificationService.show({
            content: 'Success notification',
            hideAfter: 600,
            position: { horizontal: 'center', vertical: 'top' },
            animation: { type: 'fade', duration: 400 },
            type: { style: 'success', icon: true }
        });
    }
    public showWarning(): void {
        this.notificationService.show({
            content: 'Warning notification',
            hideAfter: 600,
            position: { horizontal: 'left', vertical: 'bottom' },
            animation: { type: 'fade', duration: 400 },
            type: { style: 'warning', icon: true }
        });
    }
    public showInfo(): void {
        this.notificationService.show({
            content: 'Info notification',
            hideAfter: 600,
            position: { horizontal: 'center', vertical: 'bottom' },
            animation: { type: 'fade', duration: 400 },
            type: { style: 'info', icon: true }
        });
    }
    public showError(): void {
        this.notificationService.show({
            content: 'Error notification',
            hideAfter: 600,
            position: { horizontal: 'right', vertical: 'bottom' },
            animation: { type: 'fade', duration: 400 },
            type: { style: 'error', icon: true }
        });
    }
}
In this article