The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
import {DialogModule} from 'primeng/primeng';
Dialog is used as a container and visibility is controlled with visible property.
<p-dialog header="Title" [(visible)]="display">
Content
</p-dialog>
<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></button>
export class ModelComponent {
display: boolean = false;
showDialog() {
this.display = true;
}
}
By default dialog is hidden and enabling the visible property displays the dialog. As visible supports two-way binding, hiding the dialog with close button updates the visible state as false.
Header and Footer sections are useful to include custom content. Note that Header and Footer components should be imported and defined at directives section of your component for this to work.
<p-dialog [(visible)]="display">
<header>
Header content here
</header>
Content
<footer>
Footer content here
</footer>
</p-dialog>
Name | Type | Default | Description |
---|---|---|---|
header | string | null | Title text of the dialog. |
draggable | boolean | true | Enables dragging to change the position using header. |
resizable | boolean | true | Enables resizing of the content. |
minWidth | number | 150 | Minimum width of a resizable dialog. |
minHeight | number | 150 | Minimum width of a resizable dialog. |
width | int | 300 | Width of the dialog. |
height | int | auto | Height of the dialog. |
visible | boolean | false | Specifies the visibility of the dialog. |
modal | boolean | false | Defines if background should be blocked when dialog is displayed. |
showEffect | string | null | Effect to use when showing the dialog. |
closeOnEscape | boolean | true | Specifices if pressing escape key should hide the dialog. |
rtl | boolean | false | When enabled dialog is displayed in RTL direction. |
closable | boolean | true | Adds a close icon to the header to hide the dialog. |
responsive | boolean | false | In responsive mode, dialog adjusts itself to screen width. |
appendTo | any | null | Target element to attach the dialog, valid values are "body" or a local template variable of another element. |
Name | Parameters | Description |
---|---|---|
onBeforeShow | event: Event object | Callback to invoke before dialog is shown. |
onAfterShow | event: Event object | Callback to invoke after dialog is shown. |
onBeforeHide | event: Event object | Callback to invoke before dialog is hidden. |
onAfterHide | event: Event object | Callback to invoke after dialog is hidden. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-dialog | Container element |
ui-dialog-titlebar | Container of header. |
ui-dialog-title | Header element. |
ui-dialog-titlebar-icon | Icon container inside header. |
ui-dialog-titlebar-close | Close icon element. |
ui-dialog-titlebar-minimize | Minimize icon element. |
ui-dialog-titlebar-maximize | Maximize icon element. |
ui-dialog-content | Content element. |
Native component that requires css of PrimeUI Dialog.
<p-dialog header="Godfather I" [(visible)]="display" modal="modal" showEffect="fade">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect,
but given to ruthless violence whenever anything stands against the good of the family.</p>
<footer>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
<button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>
</div>
</footer>
</p-dialog>
<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></button>
export class DialogDemo {
display: boolean = false;
showDialog() {
this.display = true;
}
}