DEV Community

loading...
Cover image for Angular DynamicDialog

Angular DynamicDialog

primetek profile image PrimeTek ・3 min read

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';
Enter fullscreen mode Exit fullscreen mode

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 {
Enter fullscreen mode Exit fullscreen mode

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) {}

}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
show() {
    const ref = this.dialogService.open(CarsListDemo, {
        header: 'Choose a Car',
        width: '70%'
    });
}
Enter fullscreen mode Exit fullscreen mode

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%'
    });
}
Enter fullscreen mode Exit fullscreen mode
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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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});
        }
    });
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

Forem Open with the Forem app