Angular PrimeNG Dialog Properties

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

The Dialog component is used to make a component containing some content to display in an overlay window.

Angular PrimeNG Dialog Properties:

• header: It is the title text of the dialog. It is of string data type, the default value is null.
• draggable: It enables dragging to change the position using a header. It is of the boolean data type, and the default value is true.
• keepInViewport: It is used to keep dialog in the viewport. It is of a boolean data type, and the default value is true.
• resizable: It enables resizing the content. It is of a boolean data type, and the default value is true.
• contentStyle: It is used to set the style of the content section. It is of object data type, the default value is null.
• visible: It specifies the visibility of the dialog. It is of the boolean data type, the default value is false.
• modal: It is used to define if the background should be blocked when the dialog is displayed. It is of the boolean data type, the default value is false.
• position: It is used to set the position of the dialog. It is of string data type, the default value is center.
• blockScroll: It is used to specify whether the background scroll should be blocked when the dialog is visible. It is of the boolean data type, the default value is false.
• closeOnEscape: It is used to specify if pressing the escape key should hide the dialog. It is of a boolean data type, and the default value is true.
• dismissableMask: It is used to specify if clicking the modal background should hide the dialog. It is of boolean data type, the default value is false.
• rtl: When the enabled dialog is displayed in the RTL direction. It is of boolean data type, the default value is false.
• closable: It is used to set the close icon to the header to hide the dialog. It is of a boolean data type, and the default value is true.
• appendTo: It is used to set the Target element to attach the dialog, valid values are “body” or a local ng-template variable of another element. It accepts any data type, the default value is null.
• style: It is used to set the inline style of the component. It is of object data type, the default value is null.
• styleClass: It is used to set the style class of the component. It is of string data type, the default value is null.
• maskStyleClass: It is used to set the style class of the mask. It is of string data type, the default value is null.
• contentStyle: It is used to set the Inline style of the content. It is of object data type, the default value is null.
• contentStyleClass: It is used to set the style class of the content. It is of string data type, the default value is null.
• showHeader: It is used to specify whether to show the header or not. It is of the boolean datatype, and the default value is true.
• baseZIndex: It is used to set the base zIndex value to use in layering. It is of number datatype, the default value is 0.
• autoZIndex: It is used to specify whether to automatically manage to layer. It is of the boolean datatype, and the default value is true.
• minX: It is used to set the minimum value for the left coordinate of dialog in dragging. It is of number data type, the default value is 0.
• minY: It is used to set the minimum value for the top coordinate of dialog in dragging. It is of number data type, the default value is 0.
• focusOnShow: It is used to specify the first button receives focus on the show. It is of the boolean data type, and the default value is true.
• focusTrap: It is used to specify whether elements can only focus on elements inside the dialog. It is of the boolean datatype, and the default value is true.
• maximizable: It is used to specify whether the dialog can be displayed on full screen. It is of the boolean data type, the default value is false.
• breakpoints: It is the object literal to define widths per screen size. It is of object data type, default Value is null.
• transitionOptions: It is used to set the transition options of the animation. It is of string data type, the default value is 150ms cubic-bezier(0, 0, 0.2, 1).
• closeIcon: It is used to set the name of the close icon. It is of string data type, the default value is null.
• minimizeIcon: It is used to set the name of the minimize icon. It is of string data type, the default value is pi pi-window-minimize.
• maximizeIcon: It is used to set the name of the maximize icon. It is of string data type, the default value is pi pi-window-maximize.

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:

To run the above file run the below command:

ng serve --save

Example 1: Below is the example code that illustrates the use of Angular PrimeNG Dialog Properties using the draggable, and resizable properties.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Dialog Properties</h5>

<p-button
    (click)="GFG()"
    icon="pi pi-check"
    label="Click here Geek!">
</p-button>

<p-dialog header="GeeksforGeeks"
    [(visible)]="gfg" [modal]="true"
    [draggable]="true" [resizable]="true"
    [style]="{width: '75vw'}"
    [baseZIndex]="10000">
    <p>
        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.
    </p>
    <ng-template pTemplate="footer">
        <p-button icon="pi pi-check"
            (click)="gfg=false"
            label="Confirm"
            styleClass="p-button-text">
        </p-button>

        <p-button icon="pi pi-times"
            (click)="gfg=false"
            label="Reject">
        </p-button>
    </ng-template>
</p-dialog>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    constructor(private primengConfig: PrimeNGConfig) {}
    gfg: boolean;

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
    GFG() {
        this.gfg = true;
    }
}

• 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 { DialogModule } from 'primeng/dialog';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        DialogModule,
        ButtonModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})

export class AppModule { }

Output:

Example 2: Below is another example code that illustrates the use of Angular PrimeNG Dialog Properties using the position property.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Dialog Position Properties</h5>

<p-button (click)="GFG()"
    label="Click Here Geek!">
</p-button>

<p-dialog position="top"
    header="GeeksforGeeks" [(visible)]="gfg">
    <p>I am Top!</p>
</p-dialog>

<p-dialog position="bottom"
    header="GeeksforGeeks" [(visible)]="gfg">
    <p>I am Bottom!</p>
</p-dialog>

<p-dialog position="left"
    header="GeeksforGeeks" [(visible)]="gfg">
    <p>I am Left!</p>
</p-dialog>

<p-dialog position="right"
    header="GeeksforGeeks" [(visible)]="gfg">
    <p>I am Right!</p>
</p-dialog>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    constructor(private primengConfig: PrimeNGConfig) {}
    gfg: boolean;

    ngOnInit() {
      this.primengConfig.ripple = true;
    }
    GFG() {
        this.gfg = true;
    }
}

• 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 { DialogModule } from 'primeng/dialog';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        DialogModule,
        ButtonModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})

export class AppModule { }

Output:

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