Dialogs can be created dynamically with any component as the content using a DialogService.
import { DynamicDialogModule } from 'primeng/dynamicdialog';
Dynamic dialogs require an instance of a DialogService that is responsible for displaying a dialog with a component as its content. Since the dynamically loaded content is not defined at build time, a configuration is necessary using the entryComponents of your parent module. Calling open method of DialogService will display dynamic dialog. First parameter of open method is the type of component to load and the second parameter is the configuration of the Dialog such as header, width and more.
<p-toast></p-toast>
<p-button (click)="show()" icon="pi pi-info-circle" label="Show"></p-button>
To use dynamic dialog, a reference should be declared as DynamicDialogRef after the DialogService injected into the component.
import { Component, OnDestroy } from '@angular/core';
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import { Product } from '../../domain/product';
import { ProductListDemo } from './productlistdemo';
@Component({
templateUrl: './dynamicdialogdemo.html',
providers: [DialogService]
})
export class DynamicDialogDemo implements OnDestroy {
ref: DynamicDialogRef;
constructor(public dialogService: DialogService) {}
}
The open method of the DialogService is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.
import { Component } from '@angular/core';
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ProductListDemo } from './productlistdemo';
@Component({
templateUrl: './dynamicdialogdemo.html',
providers: [DialogService]
})
export class DynamicDialogDemo {
ref: DynamicDialogRef;
constructor(public dialogService: DialogService) {}
show() {
this.ref = this.dialogService.open(ProductListDemo, { header: 'Select a Product'});
}
}
In case you need to pass data to the component that is dynamically loaded, use the data property that can be access using the DynamicDialogConfig class. In additon, the loaded component can also control the Dialog using the DynamicDialogRef API. Both the DynamicDialogConfig and DynamicDialogRef are injectable using the constructor.
import { Component } from '@angular/core';
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ProductListDemo } from './productlistdemo';
@Component({
templateUrl: './dynamicdialogdemo.html',
providers: [DialogService]
})
export class DynamicDialogDemo {
ref: DynamicDialogRef;
constructor(public dialogService: DialogService) {}
show() {
this.ref = this.dialogService.open(ProductListDemo, {
data: {
id: '51gF3'
},
header: 'Select a Product'
});
}
}
Most of the time, requirement is returning a value from the dialog. DialogRef's close method is used for this purpose where the parameter passed will be available at the onClose event at the caller. Here is an example on how to close the dialog from the ProductListDemo by passing a selected product.
import { Component, Input } from '@angular/core';
import { MessageService } from 'primeng/api';
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import { Product } from '../../domain/product';
import { ProductListDemo } from './productlistdemo';
@Component({
templateUrl: './dynamicdialogdemo.html',
providers: [DialogService, MessageService]
})
export class DynamicDialogDemo {
ref: DynamicDialogRef;
constructor(public dialogService: DialogService, public messageService: MessageService) {}
show() {
this.ref = this.dialogService.open(ProductListDemo, {
header: 'Select a Product',
width: '70%',
contentStyle: { overflow: 'auto' },
baseZIndex: 10000,
maximizable: true
});
this.ref.onClose.subscribe((product: Product) => {
if (product) {
this.messageService.add({ severity: 'info', summary: 'Product Selected', detail: product.name });
}
});
}
}
ProductListDemo component used in examples above.
Name | Image | Brand | Status | |
---|---|---|---|---|
Bamboo Watch | ![]() | 65 | ||
Black Watch | ![]() | 72 | ||
Blue Band | ![]() | 79 | ||
Blue T-Shirt | ![]() | 29 | ||
Bracelet | ![]() | 15 |
<p-table [value]="products" responsiveLayout="scroll" [paginator]="true" [rows]="5" [responsive]="true">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="name">Name <p-sortIcon field="vin"></p-sortIcon></th>
<th pSortableColumn="year">Image</th>
<th pSortableColumn="price">Brand <p-sortIcon field="price"></p-sortIcon></th>
<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
<th style="width:4em"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{ product.name }}</td>
<td><img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.image" class="w-4rem h-4rem shadow-2"/></td>
<td>{{ product.price }}</td>
<td>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
</td>
<td>
<button type="button" pButton icon="pi pi-plus" (click)="selectProduct(product)"></button>
</td>
</tr>
</ng-template>
</p-table>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-dialog | Container element |
p-dynamicdialog | Container element |
p-dialog-titlebar | Container of header. |
p-dialog-title | Header element. |
p-dialog-titlebar-icon | Icon container inside header. |
p-dialog-titlebar-close | Close icon element. |
p-dialog-content | Content element. |
p-dialog-footer | Footer element. |
API defines helper props, events and others for the PrimeNG Dynamic Dialog module.
Name | Type | Default | Description |
---|---|---|---|
data | any | null | An object to pass to the component loaded inside the Dialog. |
header | string | null | Header text of the dialog. |
footer | string | null | Footer text of the dialog. |
width | string | null | Width of the dialog. |
height | string | null | Height of the dialog. |
closeOnEscape | boolean | true | Specifies if pressing escape key should hide the dialog. |
baseZIndex | number | 0 | Base zIndex value to use in layering. |
autoZIndex | boolean | true | Whether to automatically manage layering. |
dismissableMask | boolean | false | Specifies if clicking the modal background should hide the dialog. |
rtl | boolean | false | When enabled dialog is displayed in RTL direction. |
style | string | null | Inline style of the component. |
contentStyle | string | null | Inline style of the content section. |
styleClass | string | null | Style class of the component. |
transitionOptions | string | 400ms cubic-bezier(0.25, 0.8, 0.25, 1) | Transition options of the animation. |
closable | boolean | true | Adds a close icon to the header to hide the dialog. |
showHeader | boolean | true | Whether to show the header or not. |
maximizable | boolean | false | Whether the dialog can be displayed full screen. |
minimizeIcon | string | null | Name of the minimize icon. |
maximizeIcon | string | null | Name of the maximize icon. |
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. |
position | string | center | Position of the dialog, options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" or "bottom-right". |
keepInViewport | boolean | true | Keeps dialog in the viewport. |
resizable | boolean | true | Enables resizing of the content. |
draggable | boolean | true | Enables dragging to change the position using header. |
Name | Parameters | Description |
---|---|---|
onClose | event: Event object | Callback to invoke when dialog is closed. |
onDestroy | event: Event object | Callback to invoke when dialog is destroyed. |
onMaximize | event: Event object | Callback to invoke when dialog maximized or unmaximized. |
onDragStart | event: Event object | Callback to invoke when dialog dragging is started. |
onDragEnd | event: Event object | Callback to invoke when dialog dragging is completed. |
onResizeInit | event: Event object | Callback to invoke when dialog resizing is initiated. |
onResizeEnd | event: Event object | Callback to invoke when dialog resizing is completed. |