Angular DynamicDialog

Angular DynamicDialog can be created dynamically with any component as the content using a DialogService.

Setup

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

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/dynamicdialog';
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/dynamicdialog';
import {DynamicDialogConfig} from 'primeng/dynamicdialog';

@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 onClose event 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/dynamicdialog';
import {DynamicDialogConfig} from 'primeng/dynamicdialog';

@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});
        }
    });
}

Theming

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

Resources

Visit the PrimeNG DynamicDialog showcase for demos and documentation.