Angular PrimeNG Dynamic Dialog Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Dynamic Dialog Component.

Dialogs are containers to display content in an overlay window & can be dynamically created with any component as the content with the help of DialogService.  

Angular PrimeNG Dynamic Dialog Component: There are various components provided by the Angular PrimeNG in the Dynamic Dialog Component, which are described below:

• Properties: There are various properties options provided by Angular PrimeNG that can be utilized for the customization of the Dynamic Dialog Component.
• Events: Angular PrimeNG provides different events, like, resizing, dragging, destroying, or closing the Dialog Component, etc, that help to create the dynamic dialog.
• Styling: This component helps to make the interactive Dialog by implementing the different stylings provided by Angular PrimeNG.

Syntax: Create a Dialog as follows:

• Import the module:

import {DynamicDialogModule} from 'primeng/dynamicdialog';

• Implement it using the pButton attribute:

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

• Show the Dialog as follows:

this.dialogService.open(DemoTile, {
    header: 'GFG',
    width: '70%',
    contentStyle: {"overflow": "auto"},
    baseZIndex: 10000,
    maximizable: true
});

Creating Angular application & Module Installation:

• Create an Angular application using the following command.

ng new geeks_angular

• After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

• Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following:

• Steps to run the application: Write the below command to run the application:

ng serve --open

Example 1: This example illustrates the basic usage of the Dynamic Dialog Component in Angular PrimeNG.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>
     Angular PrimeNG Dynamic Dialog Component
</h3>
<button type="button"
         (click)="show()"
         pButton icon="pi pi-info-circle"
         label="Show">
</button>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { DialogService } from 'primeng/dynamicdialog';
import { DynamicDialogRef } from 'primeng/dynamicdialog';
import { TutorialDemo } from './tutorialDemo';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [DialogService, MessageService],
})
export class AppComponent {
    constructor(
        public dialogService: DialogService,
        public messageService: MessageService
    ) { }

    ref: DynamicDialogRef;

    show() {
        this.ref = this.dialogService.open(TutorialDemo, {
            header: 'GeeksforGeeks',
            width: '70%',
            contentStyle: { 'max-height': '500px',
                             overflow: 'auto' },
            baseZIndex: 10000,
        });
    }

    ngOnDestroy() {
        if (this.ref) {
            this.ref.close();
        }
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TutorialDemo } from './tutorialDemo';
import { ButtonModule } from 'primeng/button';
import { DynamicDialogModule }
    from 'primeng/dynamicdialog';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        DynamicDialogModule,
        ButtonModule,
    ],
    declarations: [AppComponent, TutorialDemo],
    bootstrap: [AppComponent],
    entryComponents: [TutorialDemo],
})
export class AppModule { }

• tutorialDemo.ts

Javascript

import { Component } from '@angular/core';
import { DynamicDialogRef } from 'primeng/dynamicdialog';
import { DynamicDialogConfig } from 'primeng/dynamicdialog';

@Component({
    template: `
        <h3>Welcome to GeeksforGeeks. This is dynamic dialog</h3>
    `,
})
export class TutorialDemo {
    constructor(
        public ref: DynamicDialogRef,
        public config: DynamicDialogConfig
    ) { }

    ngOnInit() { }
}

Output:

Example 2: This example illustrates the use of the Dynamic Dialog Component in Angular PrimeNG, where the dialog is not closable.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
  GeeksforGeeks
</h1>
<h3>
  Angular PrimeNG Dynamic Dialog Component
</h3>
<button type="button"
          (click)="show()"
          pButton
          icon="pi pi-info-circle"
          label="Show">
</button>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { DialogService } from 'primeng/dynamicdialog';
import { DynamicDialogRef } from 'primeng/dynamicdialog';
import { TutorialDemo } from './tutorialDemo';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [DialogService, MessageService],
})
export class AppComponent {
    constructor(
        public dialogService: DialogService,
        public messageService: MessageService
    ) { }

    ref: DynamicDialogRef;

    show() {
        this.ref = this.dialogService.open(TutorialDemo, {
            header: 'GeeksforGeeks',
            width: '70%',
            closable: false,
            contentStyle: { 'max-height': '500px',
                             overflow: 'auto' },
            baseZIndex: 10000,
        });
    }

    ngOnDestroy() {
        if (this.ref) {
            this.ref.close();
        }
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TutorialDemo } from './tutorialDemo';
import { ButtonModule } from 'primeng/button';
import { DynamicDialogModule }
    from 'primeng/dynamicdialog';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        DynamicDialogModule,
        ButtonModule,
    ],
    declarations: [AppComponent, TutorialDemo],
    bootstrap: [AppComponent],
    entryComponents: [TutorialDemo],
})
export class AppModule { }

• tutorialDemo.ts

Javascript

import { Component } from '@angular/core';
import { DynamicDialogRef } from 'primeng/dynamicdialog';
import { DynamicDialogConfig } from 'primeng/dynamicdialog';

@Component({
    template: `
        <h3>Welcome to GeeksforGeeks. This is dynamic dialog</h3>
    `,
})
export class TutorialDemo {
    constructor(
        public ref: DynamicDialogRef,
        public config: DynamicDialogConfig
    ) { }

    ngOnInit() { }
}

Output:

Reference: https://www.primefaces.org/primeng/dynamicdialog