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
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 theNgModule
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.