Angular PrimeNG Overlay Complete Reference
Last Updated :
05 Oct, 2023
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.
| The ConfirmDialog component is used to make a dialog box containing a confirm button to confirm the element. |
| The ConfirmDialog component is used to make a dialog box containing a confirm button to confirm the element. |
| Breakpoints should have an object literal as their value, with keys representing the largest screen sizes and values representing the widths of each screen. |
| This is used for Callback to invoke when the dialog is hidden. |
| 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. |
| This can be used to customize the confirmdialog by using customization Properties. |
| It is used to set the transition options of the show and hide animation. |
| Angular PrimeNG ConfirmDialog Properties are message, key, icon, header, etc. |
| The templates are used to put some content on some pre-structured containers. |
| 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.
| The ConfirmPopup Component is used as a confirmation overlay and is shown relative to the target. |
| It is used to set the transition options of the show animation. |
| The ConfirmPopup Component is used to display a confirmation overlay next to the target |
| 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.
| Dialog component is used to make a component containing some content to display in an overlay window. |
| Dialog component is used to make a component containing some content to display in an overlay window. |
| Using the [maximizable]=”true”, we can maximize the dialog to the full screen. |
| The position property, with the default value of center, controls where the dialogue appears. |
| Using the [style] property, we can specify the dimensions of the dialog. |
| with keys representing the largest screen sizes and values representing the widths of the dialog. |
| It is the title text of the dialog. It is of string data type, the default value is null. |
| It is used to set the position of the dialog. It is of string data type, the default value is center. |
| As dialog displays content in an overlay window, now suppose the content in the dialog is a dropdown. |
| When the dialogue is shown, an element with autofocus receives focus. |
| 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). |
| Angular PrimeNG Dialog Properties are baseZIndex, autoZIndex, minX, minY, focusOnShow, focusTrap, maximizable, etc. |
| Angular PrimeNG Dialog Events are onShow, onside, onResizeInit, onResizeEnd, onDragEnd, onMaximize. |
| The templates are used to put some content on some pre-structured containers. |
| 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,
| There are various property options provided by Angular PrimeNG that can be utilized for the customization of the Dynamic Dialog Component. |
| Angular PrimeNG provides different events, like, resizing, dragging, destroying, or closing the Dialog Component, etc, |
| 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.
| The show method requires two parameters, the first of which is the mandatory event. |
| If dismissible is set to true, clicking outside the panel closes it. |
| The Dynamic OverlayPanel Animation Configuration allows configuring the default animation with which the popup appears. |
| The properties allow us to customize the component easily which extends the functionality of the component. |
| This is used for Callback to invoke when an overlay becomes visible. |
| 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. |
| 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.
| Sidebar Position is used to define the location of the sidebar as left, right, top, and bottom. The default location is left. |
| 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. |
| It is used to set the style class of the component. It is of string data type & the default value is null. |
| Sidebar fullScreen=”true” may be utilized to make the sidebar take up the entire screen. |
| It specifies the visibility of the dialog. It is of the boolean data type, the default value is false. |
| It is a callback that is fired when a dialog is shown. |
| It is a pattern that is used as a user guide to create something. |
| 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.
| It is the position of the tooltip. It is of string data type & the default value is right. |
| 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 is used to make a tooltip around a button that provides advisory information about it. |
| It represents the text in the Tooltip. It is of string type & its default value is null. |
| Angular PrimeNG Tooltip Delay is used to show or hide tooltips quickly by default, |
| The Tooltip Scrolling Containers can be used to add a tooltip to another element with relative positioning rather than the document body, |
| It defines the position of the tooltip. It is of string data type & the default value is right. |
| The Tooltip component is used to make an element that provides advisory information for a component |
Share your thoughts in the comments
Please Login to comment...