# Rendering Container for Popup Instances

By default, the [`PopupService`](https://www.telerik.com/kendo-angular-ui-develop/components/popup/api/popupservice) renders all Popup instances inside the first root component of the application. To change the default container, use the [`POPUP_CONTAINER`](https://www.telerik.com/kendo-angular-ui-develop/components/popup/api/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`](https://www.telerik.com/kendo-angular-ui-develop/components/popup/service) 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:

![Kendo UI for Angular Popup - Default Popup instance rendering inside the application root](https://www.telerik.com/kendo-angular-ui-develop/components/assets/31a7ad24c8ddef2ccd92a72d5ff19e7d/default-popup-instance-rendering.png)

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

![Kendo UI for Angular Popup - Popup container injection with POPUP_CONTAINER token](https://www.telerik.com/kendo-angular-ui-develop/components/assets/a30c8c3a04756a0ce92760ad33fb5e48/popup-container-injection.png)

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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/popup/service/popup-container/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/popup/api/popupsettings#appendTo) property in the [`PopupSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/popup/api/popupsettings) object. See [Appending to Specific Containers](https://www.telerik.com/kendo-angular-ui-develop/components/popup/service#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](https://www.telerik.com/kendo-angular-ui-develop/components/popup/service)
* [API Reference of the POPUP_CONTAINER](https://www.telerik.com/kendo-angular-ui-develop/components/popup/api/popup_container)
* [API Reference of the PopupService](https://www.telerik.com/kendo-angular-ui-develop/components/popup/api/popupservice)