Dialog Dialog is a container to display content in an overlay window.
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


import {DialogModule} from 'primeng/dialog';

Getting Started

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="pi pi-info-circle" 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.

Width

When the content of the dialog is fluid, dialog width may grow unexpectedly, in this case define a fixed width to the dialog or the content.


<p-dialog header="Title" [(visible)]="display" [width]="300">
    Content
</p-dialog>

Header and Footer

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">
    <p-header>
        Header content here
    </p-header>
    Content
    <p-footer>
        //buttons
    </p-footer>
</p-dialog>

Overlays Inside

When dialog includes other components with overlays such as dropdown, the overlay part cannot exceed dialog boundaries due to overflow. In order to solve this, you can either append the overlay to the body or allow overflow in dialog.


<p-dialog>
    <p-dropdown appendTo="body"></p-dropdown>
</p-dialog>


<p-dialog [contentStyle]="{'overflow':'visible'}">
    <p-dropdown></p-dropdown>
</p-dialog>

Dynamic Content

Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height at content section to let the content overflow. You may also call the center() method of Dialog to re-center it after the content changes.


<p-dialog [contentStyle]="{'max-height':'200px'}">
    <ul>
        <li *ngFor="let item of items">{{item}}<li>
    </ul>
</p-dialog>

RTL Support

RTL orientation is enabled by adding "ui-rtl" to an ancestor element of dialog in combination with standard dir="rtl" option.


<div class="ui-rtl" dir="rtl">
    <p-dialog [(visible)]="display">
        <p-header>
            Header content here
        </p-header>
        Content
        <p-footer>
            Footer content here
        </p-footer>
    </p-dialog>
</div>

Properties

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 height of a resizable dialog.
width int 300 Width of the dialog.
height int auto Height of the dialog.
contentStyle object null Style of the content section.
visible boolean false Specifies the visibility of the dialog.
modal boolean false Defines if background should be blocked when dialog is displayed.
blockScroll boolean false Whether background scroll should be blocked when dialog is visible.
closeOnEscape boolean true Specifices if pressing escape key should hide the dialog.
dismissableMask boolean false Specifices if clicking the modal background 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 true In responsive mode, dialog adjusts itself to screen width.
breakpoint number 640 Maximum screen width to display the dialog with 100% width in responsive mode.
appendTo any null Target element to attach the dialog, valid values are "body" or a local ng-template variable of another element.
style string null Inline style of the component.
styleClass string null Style class of the component.
showHeader boolean true Whether to show the header or not.
positionLeft number null Left coordinate value of the dialog.
positionTop number null Top coordinate value of the dialog.
baseZIndex number 0 Base zIndex value to use in layering.
autoZIndex boolean true Whether to automatically manage layering.
minX number 0 Minimum value for the left coordinate of dialog in dragging.
minY number 0 Minimum value for the top coordinate of dialog in dragging.
focusOnShow boolean true When enabled, first button receives focus on show.
maximizable boolean false Whether the dialog can be displayed full screen.

Events

Name Parameters Description
onShow event: Event object Callback to invoke when dialog is shown.
onHide event: Event object Callback to invoke when dialog is hidden.

Styling

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-content Content element.
ui-dialog-footer Footer element.

Dependencies

None.

View on GitHub

<p-dialog header="Godfather I" [(visible)]="display" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200" [minY]="70" 
        [maximizable]="true" [baseZIndex]="10000">
    <span>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.</span>
        <p-footer>
            <button type="button" pButton icon="pi pi-check" (click)="display=false" label="Yes"></button>
            <button type="button" pButton icon="pi pi-close" (click)="display=false" label="No" class="ui-button-secondary"></button>
        </p-footer>
</p-dialog>

<button type="button" (click)="showDialog()" pButton icon="pi pi-info-circle" label="Show"></button>


export class DialogDemo {

    display: boolean = false;

    showDialog() {
        this.display = true;
    }

}