Rendering Container for Popup Instances

Updated on Mar 25, 2026

By default, the PopupService renders all Popup instances inside the first root component of the application. To change the default container, use the POPUP_CONTAINER injection token.

The POPUP_CONTAINER token accepts an ElementRef value that specifies the DOM element where all Popup instances will be injected. This token works only with the PopupService class.

The POPUP_CONTAINER token controls only the DOM location where the Popup element is inserted. The Popup still aligns and positions itself relative to its anchor element, not the container.

The following image shows how the Popup renders inside the application root by default:

When you configure a custom container through the POPUP_CONTAINER token, the Popup renders inside the designated container element:

The following example demonstrates the rendering behavior shown in the images above. The Popup renders inside the designated container element instead of the application root.

Change Theme

Theme

Loading ...

Setting the Popup Container

To configure a custom Popup container in a standalone component:

1. Import the POPUP_CONTAINER token from @progress/kendo-angular-popup.
2. Add a providers array to the component decorator.
3. Use useFactory to return the target container ElementRef.

ts

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

@Component({
    selector: 'my-app',
    standalone: true,
    imports: [KENDO_POPUP],
    providers: [
        PopupService,
        {
            provide: POPUP_CONTAINER,
            useFactory: () =>
                ({ nativeElement: document.body }) as ElementRef,
        },
    ],
    template: `...`,
})
export class AppComponent {}

Popup Container Scope Options

The Popup provides two options for controlling where Popup instances are rendered:

• POPUP_CONTAINER token—Sets a global default container for all Popup instances created by the PopupService within the component. Configure it once as a provider.
• appendTo option—Overrides the container for a specific Popup instance. Pass a ViewContainerRef to the appendTo property in the PopupSettings object. See Appending to Specific Containers for more details.

Use POPUP_CONTAINER when all Popup instances in a component must render in the same container. Use appendTo when individual Popup instances require different containers.

Suggested Links

• Angular Service
• API Reference of the POPUP_CONTAINER
• API Reference of the PopupService