All Components

Content

The Notification provides options for controlling its content.

To configure the content, use any of the following approaches:

Passing a String

Passing a string to the content field is the basic way to display a notification message. The text that is passed represents the rendered content of the notification.

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

@Component({
  selector: 'my-app',
  template: `
    <p>Show single string as info type Notification</p>
    <button class="k-button" (click)="show()">Show</button>
  `
})
class AppComponent {
    constructor(private notificationService: NotificationService) {}

    public show(): void {
      this.notificationService.show({
          content: 'Hi! I am string info type notification.',
          animation: { type: 'fade', duration: 500 },
          position: { horizontal: 'right', vertical: 'top' },
          type: { style: 'info', icon: true },
          closable: true
      });
    }
}

Using Templates

To set a template for the content area of the Notification, pass a TemplateRef to the content field of the show method.

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

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template>
        <h5>If a storm is coming, take some steps to prepare:</h5>
        <ul><li *ngFor="let step of warningSteps">{{ step }}</li></ul>
    </ng-template>

    <p>Show template reference rendered into warning type Notification</p>
    <button class="k-button" (click)="show()">Show</button>
  `
})
class AppComponent {
    @ViewChild('template', { read: TemplateRef })
    public notificationTemplate: TemplateRef<any>;

    public warningSteps = [
        'Stock up on flashlights, spare batteries, food and water.',
        'Check your first aid kit.',
        'Test your generator or battery backup.'
    ];

    constructor(private notificationService: NotificationService) {}

    public show(): void {
      this.notificationService.show({
          content: this.notificationTemplate,
          position: { horizontal: 'right', vertical: 'top' },
          animation: { type: 'fade', duration: 500 },
          closable: true,
          type: { style: 'warning', icon: true }
      });
    }
}

Rendering a Component

To render a component in the content area of the Notification, pass a component type in the content field of the show method.

Register all dynamically created components as entryComponents in the NgModule of the application. Otherwise, Angular throws a no component factory exists for the component runtime error.

import { Component, Output, EventEmitter } from '@angular/core';
import { NotificationService, NotificationRef } from '@progress/kendo-angular-notification';


@Component({
    selector: 'custom-component',
    template: `
      <span>{{ message }}</span>
      <button class="k-button k-outline" (click)="ignoreNotification($event)">IGNORE</button>
    `
  })

export class CustomComponent {
    @Output() public ignore: EventEmitter<any> = new EventEmitter();

    public message = 'Weather: Chance of rain today. There is a 40 percent chance of rain, mainly before 1 p.m.';

    public ignoreNotification(event: Event): void {
        event.preventDefault();
        this.ignore.emit();
    }
}

@Component({
    selector: 'my-app',
    template: `
        <p>Show Custom Component rendered into warning type Notification</p>
        <button class="k-button" (click)="show()">Show</button>
    `
})
export class AppComponent {
    constructor(private notificationService: NotificationService) {}

    public show(): void {
        const notificationRef: NotificationRef = this.notificationService.show({
            content: CustomComponent,
            animation: { type: 'slide', duration: 200 },
            position: { horizontal: 'right', vertical: 'top' },
            type: { style: 'warning', icon: false },
            closable: false
        });

        if (notificationRef) {
            notificationRef.content.ignore
                .subscribe(() => notificationRef.hide());
        }
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';

import { NotificationModule } from '@progress/kendo-angular-notification';
import { AppComponent } from './app.component';
import { CustomComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent, CustomComponent],
    entryComponents: [CustomComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, CommonModule, NotificationModule]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article