Appending to Dynamic Containers

The Notification service allows you to define a container to which the Notification will be appended.

To provide a ViewContainerRef element, use the appendTo property. If the specified appendTo element is part of the view which the component renders through the route navigation, or if at some point is destroyed by the application logic, add the Notification service to the providers array of the component.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrap">
            <h3>Basic routing navigation</h3>
            <ul>
                <li><a [routerLink]="['custom-component']">Go to Custom Component</a></li>
                <li><a [routerLink]="['hello-component']">Go to Hello Component</a></li>
            </ul>
            <router-outlet></router-outlet>
        </div>
    `,
    styles: [`
        .example-wrap {
            margin: 0 auto;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }
    `]
})
export class AppComponent {}
import { Component, ViewChild, ViewContainerRef, OnDestroy } from '@angular/core';
import { NotificationService } from '@progress/kendo-angular-notification';

@Component({
  selector: 'custom-component',
  template: `
    <h5>Custom component</h5>
    <button class="k-button" (click)="displayNotification()">Display Notification</button>
    <div class="append-container" #container></div>
  `,
  providers: [NotificationService],
  styles: [`
    .append-container {
      height: 250px;
      border: 1px solid black;
    }
  `]
})
export class CustomComponent implements OnDestroy {
   @ViewChild('container', { read: ViewContainerRef }) public container: ViewContainerRef;

    constructor(private notificationService: NotificationService) {}

  public ngOnDestroy(): void {
    console.log('destroy appendTo container');
  }

  public displayNotification(): void {
    this.notificationService.show({
        content: 'Custom Notification',
        appendTo: this.container,
        position: { horizontal: 'center', vertical: 'bottom' },
        type: { style: 'info', icon: true }
    });
  }
}
import { Component } from '@angular/core';

@Component({
    selector: 'hello-component',
    template: `<h5>Hello Component</h5>`
})
export class HelloComponent {}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';

import { NotificationModule } from '@progress/kendo-angular-notification';
import { AppComponent } from './app.component';
import { CustomComponent } from './custom.component';
import { HelloComponent } from './hello.component';
import { APP_BASE_HREF } from '@angular/common';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent, CustomComponent, HelloComponent],
    providers: [{provide: APP_BASE_HREF, useValue: window.location.pathname}],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      NotificationModule,
      RouterModule.forRoot([
          { path: 'hello-component', component: HelloComponent },
          { path: 'custom-component', component: CustomComponent }
        ])
      ]
})
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