Angular PrimeNG Dynamic Dialog Component

Last Updated : 26 Apr, 2025

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

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

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

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

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

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

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

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

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:

Angular PrimeNG Properties for DynamicDialog

manavsarkar07

Improve

Article Tags :

Angular PrimeNG Dynamic Dialog Component

HTML

Javascript

Javascript

Javascript

HTML

Javascript

Javascript

Javascript

Similar Reads

ConfirmDialog Component

ConfirmPopup Component

Dialog Component

Dynamic Dialog Component

OverlayPanel Component

Sidebar Component

Tooltip Component

Thank You!

What kind of Experience do you want to share?

Log in

Create Account