Positioning

The Notification enables you to align it to the browser viewport and to position it to a specific container.

Aligning to the Viewport

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 }
        });
    }
}

Aligning to Containers

You can align the Notification to a specific container by using the appendTo property. In order for the Notification to properly work, set the CSS position: relative style to the container.

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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <div #appendTo class="append-container"></div>
        <button class="k-button" (click)="showNotification()">Show</button>
    </div>
  `,
  styles: [`
    .append-container {
        position: relative;
        width: 400px;
        border: 1px solid #ccc;
        height: 250px;
        margin-bottom: 15px;
    }
    .notification-container {
        width: 100%;
        height: 180px;
        border: 1px solid #ddd;
        margin-bottom: 25px;
    }`]
})
class AppComponent {
    @ViewChild('appendTo', {read: ViewContainerRef}) public appendTo: ViewContainerRef;

    constructor(private notificationService: NotificationService) {}

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

    public showNotification(): void {
        this.notificationService.show({
            appendTo: this.appendTo,
            content: 'Hi! I am a info notification',
            animation: { type: 'fade', duration: 800 },
            type: { style: 'info', icon: true },
            position: { horizontal: this.horizontal, vertical: this.vertical }
        });
    }
}

In this article