Angular Service

The PopupService is an Angular service, which provides API calls that are used to create Popup instances dynamically.

That is, the service helps create Popup instances from TypeScript based on user interactions and without the need to define the component in a template.

Getting Started

The service allows you to configure different Popup settings. All possible options are defined by the PopupSettings interface.

The following example demonstrates how to set an absolute position for the Popup.

Creating New Popups

The Angular dependency injection injects the Popup service automatically in the constructors of the component. To create new Popups, use the open method.

Rendering the Content

You can render the content of the Popup by using the following approaches:

• Using templates
• Using components
• Appending to specific containers

Using Templates

The Popup allows the use of template expressions in its content area. To enable this behavior, pass a TemplateRef instance.

Using Components

The Popup also allows the rendering of component types in its content area. To enable this behavior, pass a reference to the dynamically created component in the content field of the result.

Verify that all dynamically created components are registered as entryComponents in the NgModule of the application. If the components are not registered, Angular throws a runtime error that there is no component factory for the component.

Appending to Specific Containers

By default, the Popup gets inserted into the first root component which is available in the ApplicationRef class. To change this behavior, use the appendTo option which specifies a ViewContainerRef instance.

Suggested Links

• API Reference of the Popup