PopupService

A service for opening Popup components dynamically
(see example).

rootViewContainerNode HTMLElement

Sets or gets the HTML element of the root component container.

Constructors

PopupService (applicationRef: ApplicationRef, componentFactoryResolver: ComponentFactoryResolver, injector: Injector, container: ElementRef)

Parameters

applicationRef ApplicationRef
componentFactoryResolver ComponentFactoryResolver
injector Injector
container ElementRef

Methods

open

Opens a Popup component. Created Popups are mounted
in the DOM directly in the root application component.

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template>
     Popup content
    </ng-template>
    <button #anchor kendoButton (click)="open(anchor, template)">Open</button>
  `
})
export class AppComponent {
    public popupRef: PopupRef;

    constructor( private popupService: PopupService ) {}

    public open(anchor: ElementRef, template: TemplateRef<any>): void {
        if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
             return;
        }

        this.popupRef = this.popupService.open({
          anchor: anchor,
          content: template
        });
    }
}

Parameters

options PopupSettings

The options which define the Popup.

Returns

PopupRef - A reference to the Popup object.