Angular Dialog

Angular Dialog is a container to display content in an overlay window.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

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()" 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: '50vw'}">
    Content
</p-dialog>

Responsive

Responsiveness can easily be implemented using media queries.

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

.mydialog {
    width: 50vw;
}

@media screen and (max-width: 40em) {
    .mydialog {
        width: 75vw;
    }
}

Header and Footer

Header and Footers sections can be customized using header and footer templates.

<p-dialog [(visible)]="display">
    <ng-template pTemplate="header">
        Header content here
    </ng-template>
    Content
    <p-footer>
        //buttons
    </p-footer>
</p-dialog>

Positioning

Dialog location is controlled with the position property whose default value is center. Other valid values are top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" and "bottom-right". You may also call the resetPosition() method of Dialog to re-position it after the content or position changes.

<p-dialog position="top" [(visible)]="display">
Content
</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>

Initial Focus

Adding autofocus to an element applies focus when the dialog is shown.

<p-dialog [(visible)]="display">
    <input type="text" pInputText >
    <input type="text" pInputText >
    <button type="button" pButton autofocus></button>
</p-dialog>

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>

Theming

Dialog supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Dialog showcase for demos and documentation.