Open In App

Angular PrimeNG Dynamic Dialog Component

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 22 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads