Angular PrimeNG Dialog Animation Configuration

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. This article will show us how to use the Dialog Animation Configuration in Angular PrimeNG.

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

Angular PrimeNG Dialog Animation Configuration properties:

• 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).
• header: It is the title text of the dialog. It is of string 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.
• baseZIndex: It is used to set the base zIndex value to use in layering. It is of number datatype, the default value is 0.

Syntax:

<p-dialog 
    header="...." 
    [(visible)]="....">
       .....
</p-dialog>

<button type="button" 
    (click)="..." 
    icon="..." 
    label="...">
</button>

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 this application: Run the below command to see the output.

ng serve --save

Example 1: In the below code, we will make use of the above syntax to demonstrate the use of the Dialog Animation Configuration in Angular PrimeNG.

app.component.html:

HTML

<p-button (click)="showBasicDialog()" label="Click Here!!"></p-button>
<p-dialog
  header="Header"
  [(visible)]="displayBasic"
  [style]="{ width: '60vw' }"
  [baseZIndex]="10000"
  [(visible)]="display"
  [transitionOptions]="'3000ms'"
>
  <p>GeeksforGeeks is a computer science portal for geeks</p>
  <ng-template pTemplate="footer">
    <p-button (click)="displayBasic = false"
    label="ok"></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',
  styles: [
    `
      :host ::ng-deep .p-button {
          margin: 0 .5rem 0 0;
          min-width: 10rem;
      }

      p {
          margin: 0;
      }

      .confirmation-content {
          display: flex;
          align-items: center;
          justify-content: center;
      }

      :host ::ng-deep .p-dialog .p-button {
          min-width: 6rem;
      }
  `,
  ],
})
export class AppComponent {
  constructor(private primengConfig: PrimeNGConfig) {}

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

  displayBasic: boolean;

  showBasicDialog() {
    this.displayBasic = true;
  }
}

app.module.ts:

Javascript

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
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:

Angular PrimeNG Dialog Animation Configuration

Example 2: In the below code, we will make use of the above syntax to demonstrate the use of the Dialog Animation Configuration in Angular PrimeNG.

app.component.html:

HTML

<div style="text-align:center;">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="grid gap-3">
  <p-button
    (click)="showPositionDialog('left')"
    icon="pi pi-arrow-right"
    label="Left"
    styleClass="p-button-info"
  ></p-button>
</div>
<p-dialog
  [transitionOptions]="'3000ms'"
  header="GeeksforGeeks"
  [(visible)]="displayPosition"
  [position]="position"
  [modal]="true"
  [style]="{ width: '50vw' }"
  [baseZIndex]="10000"
  [draggable]="false"
  [resizable]="false"
>
  <p>GeeksforGeeks is a computer science portal for geeks</p>
  <ng-template pTemplate="footer">
    <p-button
      icon="pi pi-check"
      (click)="displayPosition = false"
      label="ok"
      class="p-button-text"
    ></p-button>
  </ng-template>
</p-dialog>
</div>

app.component.ts:

Javascript

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
      :host ::ng-deep .p-button {
          margin: 0 .5rem 0 0;
          min-width: 10rem;
      }

      p {
          margin: 0;
      }

      .confirmation-content {
          display: flex;
          align-items: center;
          justify-content: center;
      }

      :host ::ng-deep .p-dialog .p-button {
          min-width: 6rem;
      }
  `]
})
export class AppComponent {

    constructor(private primengConfig: PrimeNGConfig) {}

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

    displayPosition: boolean;

    position: string;

    showPositionDialog(position: string) {
        this.position = position;
        this.displayPosition = true;
    }
}

app.module.ts:

Javascript

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
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:

Angular PrimeNG Dialog Animation Configuration

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