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

PopupService

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

NameTypeDefaultDescription

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.