DialogDialog is a container to display content in an overlay window.

Documentation

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="button" (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.

Dimensions

Use style property to define the dimensions of the Dialog.

<p-dialog header="Title" [(visible)]="display" [style]="{width: '300px', height: '200px'}">
    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>
 

Animation Configuration

Transition of the Dialog open and hide animations can be customized using the transitionOptions property with a default value as 150ms cubic-bezier(0, 0, 0.2, 1), example below disables the animation altogether.

<p-dialog [(visible)]="display" [transitionOptions]="'0ms'"></p-dialog>
 

Properties

Events

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Dependencies

None.

Source

View on GitHub

<p-dialog header="Godfather I" [(visible)]="display" [modal]="true" [responsive]="true" [style]="{width: '350px', minWidth: '200px'}" [minY]="70" 
        [maximizable]="true" [baseZIndex]="10000">
    <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>
        <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;
    }
}