Angular PrimeNG Overlay Complete Reference

Last Updated : 23 Jul, 2025

Angular PrimeNG Overlay facilitates the rendering of the content/ confirmation windows, which is shared with multiple actions for the same component. The overlay can also be created dynamically for the dialogs to display the content, & can also displayed from the edges of the screen by making the Sidebar panel, in order to show the informative data by using the Tooltip directive.

The complete list of Overlay Components is listed below with their brief description:

ConfirmDialog Component

ConfirmDialog component is used to make a dialog box containing a confirm button to confirm the element.

Components	Descriptions
ConfirmDialog Basic	The ConfirmDialog component is used to make a dialog box containing a confirm button to confirm the element.
ConfirmDialog Position	The ConfirmDialog component is used to make a dialog box containing a confirm button to confirm the element.
ConfirmDialog Responsive	Breakpoints should have an object literal as their value, with keys representing the largest screen sizes and values representing the widths of each screen.
ConfirmDialog Events	This is used for Callback to invoke when the dialog is hidden.
ConfirmDialog ConfirmationService	The ConfirmationService can be implemented to display the dialog box for the confirmation object options, or hide the dialog box without invoking accept or reject the callbacks.
ConfirmDialog Customization	This can be used to customize the confirmdialog by using customization Properties.
ConfirmDialog Animation Configuration	It is used to set the transition options of the show and hide animation.
ConfirmDialog Properties	Angular PrimeNG ConfirmDialog Properties are message, key, icon, header, etc.
ConfirmDialog Templates	The templates are used to put some content on some pre-structured containers.
ConfirmDialog Styling	It can be defined using the p-confirmDialog tag and using the confirm method on an instance of ConfirmationService is necessary to display it.

ConfirmPopup Component:

The ConfirmPopup Component is used as a confirmation overlay and is shown relative to the target.

Components	Descriptions
ConfirmPopup ConfirmationService	The ConfirmPopup Component is used as a confirmation overlay and is shown relative to the target.
ConfirmPopup Animation Configuration	It is used to set the transition options of the show animation.
ConfirmPopup Properties	The ConfirmPopup Component is used to display a confirmation overlay next to the target
ConfirmPopup Styling	The ConfirmPopup Component is displayed as a confirmation overlay.

Dialog Component

The Dialog Component is used to make a component containing some content to display in an overlay window.

Components	Descriptions
Dialog Basic	Dialog component is used to make a component containing some content to display in an overlay window.
Dialog Modal	Dialog component is used to make a component containing some content to display in an overlay window.
Dialog Maximizable	Using the [maximizable]=”true”, we can maximize the dialog to the full screen.
Dialog Position	The position property, with the default value of center, controls where the dialogue appears.
Dialog Dimensions	Using the [style] property, we can specify the dimensions of the dialog.
Dialog Responsive	with keys representing the largest screen sizes and values representing the widths of the dialog.
Dialog Header and Footer	It is the title text of the dialog. It is of string data type, the default value is null.
Dialog Positioning	It is used to set the position of the dialog. It is of string data type, the default value is center.
Dialog Overlays Inside	As dialog displays content in an overlay window, now suppose the content in the dialog is a dropdown.
Dialog Initial Focus	When the dialogue is shown, an element with autofocus receives focus.
Dialog Animation Configuration	It is used to set the transition options of the animation. It is of string data type, the default value is 150ms cubic-bezier(0, 0, 0.2, 1).
Dialog Properties	Angular PrimeNG Dialog Properties are baseZIndex, autoZIndex, minX, minY, focusOnShow, focusTrap, maximizable, etc.
Dialog Events	Angular PrimeNG Dialog Events are onShow, onside, onResizeInit, onResizeEnd, onDragEnd, onMaximize.
Dialog Templates	The templates are used to put some content on some pre-structured containers.
Dialog Styling	This class is for applying custom styling to the container element.

Dynamic Dialog Component:

There are various components provided by the Angular PrimeNG in the Dynamic Dialog Component, There are various components provided by the Angular PrimeNG in the Dynamic Dialog Component,

Components	Descriptions
Properties for DynamicDialog	There are various property options provided by Angular PrimeNG that can be utilized for the customization of the Dynamic Dialog Component.
Dynamic Dialog Events	Angular PrimeNG provides different events, like, resizing, dragging, destroying, or closing the Dialog Component, etc,
Dynamic Dialog Styling	This component helps to make the interactive Dialog by implementing the different stylings provided by Angular PrimeNG.

OverlayPanel Component

The OverlayPanel Component acts as the container component that renders the overlay with the targeted position.

Components	Descriptions
Dynamic OverlayPanel Show and Hide	The show method requires two parameters, the first of which is the mandatory event.
Dynamic OverlayPanel Dismissable and CloseIcon	If dismissible is set to true, clicking outside the panel closes it.
Dynamic OverlayPanel Animation Configuration	The Dynamic OverlayPanel Animation Configuration allows configuring the default animation with which the popup appears.
Dynamic OverlayPanel Properties	The properties allow us to customize the component easily which extends the functionality of the component.
Dynamic OverlayPanel Events	This is used for Callback to invoke when an overlay becomes visible.
Dynamic OverlayPanel Templates	The templates in OverlayPanel are used to put some content on some pre-structured containers and we don’t need to modify much to suit different needs.
Dynamic OverlayPanel Styling	Styling is used to override some default styles to match the theme of the site that we are working on.

Sidebar Component

The Sidebar Component is used to make an element that overlays at the edges of the screen.

Components	Descriptions
Sidebar Position	Sidebar Position is used to define the location of the sidebar as left, right, top, and bottom. The default location is left.
Sidebar Size	Sidebar size can be used to adjust the size of the sidebar using the fixed values or by using the already defined values as p-sidebar–sm, p-sidebar-md, and p-sidebar-lg.
Sidebar Animation Configuration	It is used to set the style class of the component. It is of string data type & the default value is null.
Sidebar Full Screen	Sidebar fullScreen=”true” may be utilized to make the sidebar take up the entire screen.
Sidebar Properties	It specifies the visibility of the dialog. It is of the boolean data type, the default value is false.
Sidebar Events	It is a callback that is fired when a dialog is shown.
Sidebar Templates	It is a pattern that is used as a user guide to create something.
Sidebar Styling	styling properties, such as positioning the sidebar, closing or adjusting the size of the sidebar, etc.

Tooltip Component

The Tooltip Component is used to make an element that provides advisory information for a component.

Components	Descriptions
Tooltip Positions	It is the position of the tooltip. It is of string data type & the default value is right.
Tooltip Focus and Blur	Tooltip Focus and Blur are used to display a tooltip around the target element when the focus event is triggered and it disappears when the blur event is triggered.
Tooltip Button	Tooltip Button is used to make a tooltip around a button that provides advisory information about it.
Tooltip Events	It represents the text in the Tooltip. It is of string type & its default value is null.
Tooltip Delay	Angular PrimeNG Tooltip Delay is used to show or hide tooltips quickly by default,
Tooltip Scrolling Containers	The Tooltip Scrolling Containers can be used to add a tooltip to another element with relative positioning rather than the document body,
Tooltip Properties	It defines the position of the tooltip. It is of string data type & the default value is right.
Tooltip Styling	The Tooltip component is used to make an element that provides advisory information for a component

Introduction to AngularJS

kartik

Improve

Article Tags :

Angular PrimeNG Overlay Complete Reference

ConfirmDialog Component

ConfirmPopup Component:

Dialog Component

Dynamic Dialog Component:

OverlayPanel Component

Sidebar Component

Tooltip Component

Similar Reads

AngularJS Basics

AngularJS Directives

AngularJS Filters

AngularJS Converting Functions

AngularJS Comparing Functions

AngularJS Questions

Thank You!

What kind of Experience do you want to share?