New to Kendo UI for Angular? Start a free 30-day trial

PopupService

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

Name	Type	Default	Description
rootViewContainerNode	`HTMLElement`		Sets or gets the HTML element of the root component container.

Constructors

PopupService


(applicationRef: ApplicationRef, componentFactoryResolver: ComponentFactoryResolver, injector: Injector, container: ElementRef<any>)

Parameters

applicationRef


ApplicationRef

componentFactoryResolver


ComponentFactoryResolver

injector


Injector

container


ElementRef<any>

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.