Angular PrimeNG Dynamic Dialog Events

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. In this article, we will learn about Angular PrimeNG Dynamic Dialog Events.

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 Events: Angular PrimeNG provides different events, like, resizing, dragging, destroying, or closing the Dialog Component, etc, that help to create the dynamic dialog.

• onClose: This is invoked when the dialog is closed.
• onDestroy: This is invoked when the dialog is destroyed.
• onMaximize: This is invoked when the dialog is maximized or unmaximized.
• onDragStart: This is invoked when dialog dragging is started.
• onDragEnd: This is invoked when dialog dragging is completed.
• onResizeInit: This is invoked when dialog resizing is initiated.
• onResizeEnd: This is invoked when dialog resizing is completed.

Syntax:

show() {
     this.ref = this.dialogService.open(TutorialDemo, {
      header: '....',
      width: '....',
      contentStyle: { .... },
      baseZIndex: ....,
 });
    this.ref.onDestroy.subscribe(
       ()=>{....}
    )       
}

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Steps to run the application: Run the below command to see the output

ng serve --save 

Example 1: In this article, we will learn about the onClose event.

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

• app.component.html:

HTML

<div style="width: 60%;">
   <h1 style="color:green">
        GeeksforGeeks
   </h1>
   <h2>
        Angular PrimeNG Dynamic Dialog Events
   </h2>
   <button
       type="button"
       (click)="show()"
       pButton icon="pi pi-info-circle"
       label="Show">
  </button>
</div>

• 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=new DynamicDialogRef;

    show() {
        this.ref = this.dialogService.open(TutorialDemo, {
            header: 'GeeksforGeeks',
            width: '70%',
            contentStyle: { 'max-height': '500px',
            overflow: 'auto' },
            baseZIndex: 10000,
        });
        this.ref.onClose.subscribe(
            ()=>{
                alert("Hi Geek!! Onclose called")
            }
        )
    }
}

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

Output:

Example 2: In this example, we will learn about onDestroy Event.

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

• app.component.html:

HTML

<div style="width: 60%;">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        Angular PrimeNG Dynamic Dialog Events
    </h2>
    <button
        type="button"
        (click)="show()"
        pButton icon="pi pi-info-circle"
        label="Show">
    </button>
</div>

• 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=new DynamicDialogRef;

    show() {
        this.ref = this.dialogService.open(TutorialDemo, {
            header: 'GeeksforGeeks',
            width: '70%',
            contentStyle: { 'max-height': '500px',
            overflow: 'auto' },
            baseZIndex: 10000,
        });
        this.ref.onDestroy.subscribe(
            ()=>{
                alert("Hi Geek!! OnDestroy called")
            }
        )
    }
}

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

Output:

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