All Components

Animations

The Notification allows you to enable and disable its animations.

To control the animation behavior, use the animation property.

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

@Component({
  selector: 'my-app',
  template: `
      <div class="example-config">
            <label><input type="checkbox" [(ngModel)]="enabled"/> Animate</label>
            <hr />
            <label><input type="number" min="0" [(ngModel)]="duration" [disabled]="!enabled" style="width:60px;" /> Duration</label>
            <hr />
            <label><input type="radio" value="slide" name="animationType" [(ngModel)]="animationType" [disabled]="!enabled" /> Slide</label>
            <label><input type="radio" value="fade" name="animationType" [(ngModel)]="animationType" [disabled]="!enabled" /> Fade</label>
            <hr />
        </div>

        <div #viewContainer></div>

        <ng-template #slidetemplate>Hi! I am a template reference rendered into a success type Notification with <strong>sliding</strong> animation.</ng-template>
        <ng-template #fadetemplate>Hi! I am a template reference rendered into a info type Notification with <strong>fading</strong> animation.</ng-template>
        <ng-template #template>Hi! I am a template reference rendered into a default type Notification with <strong>unset</strong> animation.</ng-template>

        <button class="k-button" (click)="show()">Show</button>
  `
})
class AppComponent {
    @ViewChild('slidetemplate', { read: TemplateRef })
    public slidetemplate: TemplateRef<any>;

    @ViewChild('fadetemplate', { read: TemplateRef })
    public fadetemplate: TemplateRef<any>;

    @ViewChild('template', { read: TemplateRef })
    public template: TemplateRef<any>;

    @ViewChild('viewContainer', { read: ViewContainerRef })
    public viewContainer: ViewContainerRef;

    public enabled: boolean = true;
    public duration: number = 500;
    public animationType: string = 'slide';

    constructor(private notificationService: NotificationService) {}

    public show(): void {
        if (this.enabled && this.animationType === 'slide') {
            this.notificationService.show({
                content: this.slidetemplate,
                animation: {
                    type: this.animationType,
                    duration: this.duration
                },
                type: { style: 'success' }
            })
        } else if (this.enabled && this.animationType === 'fade') {
            this.notificationService.show({
                content: this.fadetemplate,
                animation: {
                    type: this.animationType,
                    duration: this.duration
                },
                type: { style: 'info', icon: true }
            })
        } else {
            this.notificationService.show({
                content: this.template,
                position: { horizontal: 'right', vertical: 'bottom' }
            })
        }
    }
}
In this article