Angular PrimeNG Properties for DynamicDialog

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 know how to use the Properties for DynamicDialog in Angular PrimeNG.

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 Properties for DynamicDialog Properties: There are various properties options provided by Angular PrimeNG that can be utilized for the customization of the Dynamic Dialog Component. 

• data: It is a piece of data to be passed to the Dialog’s loaded component.
• header: It is text in the dialog’s header.
• footer: It is text in the dialog’s footer.
• width: It is the width of the dialog. 
• height: It is the height of the dialog.
• closeOnEscape: It specifies whether the dialog should be hidden by pressing the escape key.
• baseZIndex: It is the value for the base zIndex to use in layering.
• autoZIndex: It is used to check whether layering should be managed automatically.
• dismissableMask: It specifies whether the dialog should be hidden by clicking the modal background.
• rtl: When enabled, RTL-oriented dialog is displayed.
• style: It is the inline style of the component. 
• contentStyle: It is the content section inline style.
• styleClass: It is the component’s inline style.
• transitionOptions: It is the options for the animation’s transitions.
• closable: It hides the dialog by adding a close icon to the header.
• showHeader: It specifies whether or not to display the header.
• maximizable: It specifies whether the dialog will fit on the entire screen.
• minimizeIcon: It is the minimize icon’s name.
• maximizeIcon: It is the maximize icon’s name.
• minX: It is the lowest possible value for the dialog’s left coordinate when dragging.
• minY: It is the lowest possible value for the dialog’s top coordinate when dragging.
• position: It is used to set the position of the dialog. “Center,” “Top,” “Bottom,” “Left,” “Right,” “Top-Left,” “Top-Right,” “Bottom-Left,” or “Bottom-Right” are the dialog’s positions.
• keepInViewport: It keeps the dialog in the viewport.
• resizable: It is used to enable the resizing of the content. 
• draggable: It allows header dragging to change the position.

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: This is the basic example that illustrates how to use the Angular PrimeNG Properties for DynamicDialog using the width and height properties.

• app.component.html:

• app.component.ts:

• app.module.ts:

• tutorialDemo.ts:

Output:

 

Example 2: This is another example that illustrates how to use the Angular PrimeNG Properties for DynamicDialog using the dismissableMask property.

• app.component.html:

• app.component.ts:

• app.module.ts:

• tutorialDemo.ts:

Output:

 

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