All Components

Angular Service

The PopupService is an Angular service which provides API calls that are used to create Popup instances dynamically.

That is, the service helps create Popup instances from TypeScript based on user interactions and without the need to define the component in a template.

Getting Started

The service allows you to configure different Popup settings. All possible options are defined by the PopupSettings interface.

The following example demonstrates how to set an absolute position for the Popup.

import { Component, TemplateRef } from '@angular/core';
import {
  PopupService,
  PopupRef
} from '@progress/kendo-angular-popup';

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template>
      <p style="margin: 30px;">Popup content!</p>
    </ng-template>
    <div class="example-wrapper">
      <button (click)="togglePopup(template)" class="k-button">Toggle popup</button>
    </div>
  `
})
export class AppComponent {
    private popupRef: PopupRef;

    constructor(private popupService: PopupService) {}

    public togglePopup(template: TemplateRef<any>) {
      if (this.popupRef) {
          this.popupRef.close();
          this.popupRef = null;
      } else {
          this.popupRef = this.popupService.open({
              content: template,
              offset: { top: 100, left: 100 }
          });
      }
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { PopupModule } from '@progress/kendo-angular-popup';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      // import the PopupModule and the PopupService provider
      PopupModule,

      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './ng.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Creating New Popups

The Angular dependency injection injects the Popup service automatically in the constructors of the component. To create new Popups, use the open method.

Rendering the Content

You can render the content of the Popup by:

Using Templates

The Popup allows the use of template expressions in its content area. To enable this behavior, pass a TemplateRef instance.

import { Component, ElementRef, TemplateRef } from '@angular/core';
import {
  PopupService,
  PopupRef
} from '@progress/kendo-angular-popup';

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template>
      <p style="margin: 30px;">Popup content!</p>
    </ng-template>
    <div class="example-wrapper">
      <button #anchor (click)="togglePopup(anchor, template)" class="k-button">Toggle popup</button>
    </div>
  `
})
export class AppComponent {
    private popupRef: PopupRef;

    constructor(private popupService: PopupService) {}

    public togglePopup(anchor: ElementRef, template: TemplateRef<any>) {
      if (this.popupRef) {
        this.popupRef.close();
        this.popupRef = null;
      } else {
        this.popupRef = this.popupService.open({
          anchor: anchor,
          content: template
        });
      }
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { PopupModule } from '@progress/kendo-angular-popup';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      // import the PopupModule and the PopupService provider
      PopupModule,

      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './ng.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Using Components

The Popup also allows the rendering of component types in its content area. To enable this behavior, pass a reference to the dynamically created component in the content field of the result.

Verify that all dynamically created components are registered as entryComponents in the NgModule of the application. If the components are not registered, Angular throws a runtime error that there is no component factory for the component.

import { Component, ElementRef, TemplateRef } from '@angular/core';
import {
  PopupService,
  PopupRef
} from '@progress/kendo-angular-popup';

import { CustomComponent } from './custom.component';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <button #anchor (click)="togglePopup(anchor)" class="k-button">Toggle popup</button>
    </div>
  `
})
export class AppComponent {
    private popupRef: PopupRef;

    constructor(private popupService: PopupService) {}

    public togglePopup(anchor: ElementRef) {
      if (this.popupRef) {
        this.popupRef.close();
        this.popupRef = null;
      } else {
        this.popupRef = this.popupService.open({
          anchor: anchor,
          content: CustomComponent
        });
      }
    }
}
import { Component } from '@angular/core';

@Component({
  selector: 'custom-component',
  template: `
    <ul>
        <li>{{name}} 1</li>
        <li>{{name}} 2</li>
        <li>{{name}} 3</li>
    </ul>
  `,
  styles: [`
    ul {
      padding: 20px 40px;
      margin: 0;
    }
  `]
})
export class CustomComponent {
    public name = 'Item';
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { CustomComponent } from './custom.component';

import { PopupModule } from '@progress/kendo-angular-popup';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent, CustomComponent ],
    entryComponents: [ CustomComponent ],
    imports: [
      // import the PopupModule and the PopupService provider
      PopupModule,

      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './ng.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Appending to Specific Containers

By default, the Popup gets inserted into the first root component which is available in the ApplicationRef class. To change this behavior, use the appendTo option which specifies a ViewContainerRef instance.

import { Component, ElementRef, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import {
  PopupService,
  PopupRef
} from '@progress/kendo-angular-popup';

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template>
      <p style="margin: 30px;">Popup content!</p>
    </ng-template>
    <div class="example-wrapper">
      <button #anchor (click)="togglePopup(anchor, template)" class="k-button">Toggle popup</button>
      <div #container><!-- the popup will be appended after this element--></div>
    </div>
  `
})
export class AppComponent {
    @ViewChild('container', { read: ViewContainerRef }) public container: ViewContainerRef;

    private popupRef: PopupRef;

    constructor(private popupService: PopupService) {}

    public togglePopup(anchor: ElementRef, template: TemplateRef<any>) {
      if (this.popupRef) {
        this.popupRef.close();
        this.popupRef = null;
      } else {
        this.popupRef = this.popupService.open({
          anchor: anchor,
          appendTo: this.container,
          content: template
        });
      }
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { PopupModule } from '@progress/kendo-angular-popup';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      // import the PopupModule and the PopupService provider
      PopupModule,

      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './ng.module';

enableProdMode();

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