All Components

Positioning

You can align the Notification to the browser viewport by using the position property.

By default, the Notification is horizontally aligned to the right and vertically aligned to the top of the viewport.

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

@Component({
  selector: 'my-app',
  template: `
  <div class="example-config">
            <div>Horizontal</div>
            <label><input type="radio" value="left" name="horizontal" [(ngModel)]="horizontal" /> Left</label>
            <label><input type="radio" value="center" name="horizontal" [(ngModel)]="horizontal" /> Center</label>
            <label><input type="radio" value="right" name="horizontal" [(ngModel)]="horizontal" /> Right</label>
            <div>Vertical</div>
            <label><input type="radio" value="top" name="vertical" [(ngModel)]="vertical" /> Top</label>
            <label><input type="radio" value="bottom" name="vertical" [(ngModel)]="vertical" /> Bottom</label>
    </div>
    <div class="example-wrapper">
        <button class="k-button" (click)="showNotification()">Show</button>
    </div>
  `,
  styles: [`
    .notification-container {
        width: 100%;
        height: 180px;
        border: 1px solid #ddd;
        margin-bottom: 25px;
    }`]
})
class AppComponent {
    constructor(private notificationService: NotificationService) {}

    public horizontal: string = 'right';
    public vertical: string = 'top';

    public showNotification(): void {
        this.notificationService.show({
            content: `Hi! I am info notification with position set to { horizontal: ${this.horizontal}, vertical: ${this.vertical} }`,
            animation: { type: 'fade', duration: 800 },
            type: { style: 'info', icon: true },
            position: { horizontal: this.horizontal, vertical: this.vertical }
        });
    }
}
In this article