Dialog is a container component to display the content in an Overlay window. To save the web page's viewport, Dialog is very useful to display additional information in a popup format. The visibility of Dialog is controlled through the visible property.
By default, the Dialog is hidden with visibility as false and enabling the visible property displays the Dialog. Due to the two-way binding nature of Dialog, the visible property turned as false automatically after closing the Dialog using the close icon. The closeOnEscape attribute is used to close the Dialog with the Esc key.
A basic example of Dialog component with source button would be written as follows:
<p-dialog header="PrimeNG" [(visible)]="basic">
PrimeNG content goes here.... </dialog>
The visible property is enabled on the user action. The following screenshot shows a snapshot result of the basic Dialog example:
The Dialog component supports two event callbacks named onShow and...