Dynamic DialogDialogs can be created dynamically with any component as the content using a DialogService.

Documentation

Import

import {DynamicDialogModule} from 'primeng/dynamicdialog';
 

Getting Started

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. Example below, displays a list of cars using the CarsListDemo component so it needs to be configured at entryComponents along with the import of DynamicDialogModule. The configuration of the demo page is as follows;

@NgModule({
    imports: [
        CommonModule,
        DynamicDialogModule,
        ToastModule,
        TableModule,
        ButtonModule
    ],
    declarations: [
        DynamicDialogDemo,
        CarsListDemo
    ],
    entryComponents: [
        CarsListDemo
    ]
})
export class DynamicDialogDemoModule {
 

Next step, is injecting an instance of a DialogService to the component that will open the dialog.

import {Component} from '@angular/core';
import {DialogService} from 'primeng/api';
import {CarsListDemo} from './carslistdemo';
import {Car} from '../../components/domain/car';
@Component({
    templateUrl: './dynamicdialogdemo.html',
    providers: [DialogService]
})
export class DynamicDialogDemo {
    constructor(public dialogService: DialogService) {}
}
 

Displaying a dialog is done with the open method where the first parameter is the type of component to load and the second parameter is the configuration of the Dialog such as header, width and more.

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

show() {
    const ref = this.dialogService.open(CarsListDemo, {
        header: 'Choose a Car',
        width: '70%'
    });
}
 

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.

show() {
    const ref = this.dialogService.open(CarsListDemo, {
        data: {
            id: '51gF3'
        },
        header: 'Choose a Car',
        width: '70%'
    });
}
 

import {Component} from '@angular/core';
import {Car} from '../../components/domain/car';
import {CarService} from '../../service/carservice';
import {DynamicDialogRef} from 'primeng/api';
import {DynamicDialogConfig} from 'primeng/api';
@Component({
    templateUrl: './carslistdemo.html',
})
export class CarsListDemo {
    cars: Car[];
    constructor(private carService: CarService, public ref: DynamicDialogRef, public config: DynamicDialogConfig) { }
    ngOnInit() {
        //id: this.config.id
        this.carService.getCarsSmall(id).then(cars => this.cars = cars);
    }
}
 

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 onCloseevent at the caller. Here is an example on how to close the dialog from the CarsListDemo by passing a selected car.

import {Component} from '@angular/core';
import {Car} from '../../components/domain/car';
import {CarService} from '../../service/carservice';
import {DynamicDialogRef} from 'primeng/api';
import {DynamicDialogConfig} from 'primeng/api';
@Component({
    templateUrl: './carslistdemo.html',
})
export class CarsListDemo {
    cars: Car[];
    constructor(private carService: CarService, public ref: DynamicDialogRef, public config: DynamicDialogConfig) { }
    ngOnInit() {
        //id: this.config.id
        this.carService.getCarsSmall(id).then(cars => this.cars = cars);
    }
    selectCar(car: Car) {
        this.ref.close(car);
    }
}
 

Now at the class that opens the dialog, the selected car gets passed to the Observable.

show() {
    const ref = this.dialogService.open(CarsListDemo, {
        header: 'Choose a Car',
        width: '70%'
    });
    ref.onClose.subscribe((car: Car) => {
        if (car) {
            this.messageService.add({severity:'info', summary: 'Car Selected', detail:'Vin:' + car.vin});
        }
    });
}
 

Properties for DynamicDialog

Dynamic Dialogs provide the following customization options.

Events

Styling

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

Dependencies

None.

Source

View on GitHub

DynamicDialogDemo

<p-toast [style]="{marginTop: '80px'}"></p-toast>
<button type="button" (click)="show()" pButton icon="pi pi-info-circle" label="Show"></button>
 

export class DynamicDialogDemo {
    constructor(public dialogService: DialogService, public messageService: MessageService) {}
    show() {
        const ref = this.dialogService.open(CarsListDemo, {
            header: 'Choose a Car',
            width: '70%',
            contentStyle: {"max-height": "350px", "overflow": "auto"}
        });
        ref.onClose.subscribe((car: Car) =>{
            if (car) {
                this.messageService.add({severity:'info', summary: 'Car Selected', detail:'Vin:' + car.vin});
            }
        });
    }
}
 

CarsListDemo

<p-table [value]="cars" [paginator]="true" [rows]="5" [responsive]="true">
    <ng-template pTemplate="header">
        <tr>
            <th pSortableColumn="vin">Vin <p-sortIcon field="vin"></p-sortIcon></th>
            <th pSortableColumn="year">Year <p-sortIcon field="year"></p-sortIcon></th>
            <th pSortableColumn="brand">Brand <p-sortIcon field="brand"></p-sortIcon></th>
            <th pSortableColumn="color">Color <p-sortIcon field="color"></p-sortIcon></th>
            <th style="width:4em"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td><span class="ui-column-title">Vin</span>{{car.vin}}</td>
            <td><span class="ui-column-title">Year</span>{{car.year}}</td>
            <td><span class="ui-column-title">Brand</span>{{car.brand}}</td>
            <td><span class="ui-column-title">Color</span>{{car.color}}</td>
            <td>
                <button pButton icon="pi pi-search" (click)="selectCar(car)"></button>
            </td>
        </tr>
    </ng-template>
</p-table>
 

export class CarsListDemo {
    cars: Car[];
    constructor(private carService: CarService, public ref: DynamicDialogRef, public config: DynamicDialogConfig) { }
    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    }
    selectCar(car: Car) {
        this.ref.close(car);
    }
}