Render a dialog using utility functions in Angular Dialog component

26 Feb 202613 minutes to read

The dialog component provides built-in utility functions to render alert and confirm dialogs with minimal code.
The following options are used as arguments when calling the utility functions:

Options	Description
title	Specifies the title of the dialog, similar to the header property.
content	Specifies the content to display in the dialog, similar to the content property.
isModal	Specifies whether the dialog displays as modal or non-modal. For more details, refer to the isModal property.
position	Specifies the position of the alert or confirm dialog within the document. For more details, refer to the position property, e.g., { X: 'center', Y: 'center' }.
okButton	Configures the OK button with button properties and click events. Example: okButton: { icon: 'icon-class', cssClass: 'custom-class', click: 'handler', text: 'Yes' } (default text is ‘OK’).
cancelButton	Configures the Cancel button with button properties and click events. Example: cancelButton: { icon: 'icon-class', cssClass: 'custom-class', click: 'handler', text: 'No' } (default text is ‘Cancel’).
isDraggable	Specifies whether the alert or confirm dialog can be dragged by the user.
showCloseIcon	When set to true, displays the close icon in the dialog component.
closeOnEscape	When set to true, closes the dialog by pressing the Esc key.
animationSettings	Specifies the animation settings for the dialog component.
cssClass	Specifies the CSS class name to append to the dialog.
zIndex	Specifies the z-index order of the dialog for layering in front of or behind other components.
open	Event triggered after the dialog opens.
close	Event triggered after the dialog closes.

Alert dialog

An alert dialog displays warning messages to users. Use the following code to render a simple alert dialog in an application.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild, OnInit, ViewEncapsulation } from '@angular/core';
import { DialogUtility } from '@syncfusion/ej2-popups';

@Component({
imports: [
        
    ],


standalone: true,
    selector: 'app-root',
    template: `<button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Alert Dialog</button>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
    ngOnInit(): void {
        throw new Error('Method not implemented.');
    }
    public onOpenDialog = function(event: any): void {
        DialogUtility.alert('This is an Alert Dialog!');
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render an alert dialog with options

The following sample demonstrates rendering an alert dialog with additional configuration options.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild, OnInit } from '@angular/core';
import { DialogUtility } from '@syncfusion/ej2-popups';

@Component({
imports: [
        
    ],


standalone: true,
    selector: 'app-root',
    template: `<button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Alert Dialog</button>`
})

export class AppComponent implements OnInit {
    ngOnInit(): void {
        throw new Error('Method not implemented.');
    }

    public onOpenDialog = (event: any): void => {
       DialogUtility.alert({
        title: 'Alert Dialog',
        content: "This is an Alert Dialog!",
        okButton: {  text: 'OK', click: this.okClick.bind(this) },
        showCloseIcon: true,
        closeOnEscape: true,
        animationSettings: { effect: 'Zoom' }
    });
 }
 private okClick(): void {
    alert('you clicked OK button');
 }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Confirm dialog

A confirm dialog displays a specified message along with OK and Cancel buttons.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild, OnInit } from '@angular/core';
import { DialogUtility } from '@syncfusion/ej2-popups';

@Component({
imports: [
        
    ],


standalone: true,
    selector: 'app-root',
    template: `<button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Confirm Dialog</button>`
})

export class AppComponent implements OnInit {
    ngOnInit(): void {
        throw new Error('Method not implemented.');
    }
    public onOpenDialog = function(event: any): void {
        DialogUtility.confirm('This is a Confirmation Dialog!');
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render a confirmation dialog with options

The following sample demonstrates rendering a confirmation dialog with additional configuration options.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild, OnInit } from '@angular/core';
import { DialogUtility } from '@syncfusion/ej2-popups';

@Component({
imports: [
        
    ],


standalone: true,
    selector: 'app-root',
    template: `<button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Confirm Dialog</button>`
})

export class AppComponent implements OnInit {
    ngOnInit(): void {
        throw new Error('Method not implemented.');
    }
    public onOpenDialog = (event: any): void => {
        DialogUtility.confirm({
        title: ' Confirmation Dialog',
        content: "This is a Confirmation Dialog!",
        okButton: {  text: 'OK', click: this.okClick.bind(this) },
        cancelButton: {  text: 'Cancel', click: this.cancelClick.bind(this) },
        showCloseIcon: true,
        closeOnEscape: true,
        animationSettings: { effect: 'Zoom' }
    });
    }
    private okClick(): void {
        alert('you clicked OK button');
    }

    private cancelClick(): void {
        alert('you clicked Cancel button');
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Close utility dialog

When rendering alert and confirmation dialogs through utility methods, close the dialog using the following methods:

• Press the Esc key if the closeOnEscape property is enabled.
• Click the close button if the showCloseIcon property is enabled.

Manually close dialogs by creating an instance and calling the hide method.

The following sample demonstrates different ways to close the utility dialog.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild, OnInit } from '@angular/core';
import { DialogUtility } from '@syncfusion/ej2-popups';

@Component({
imports: [
        
    ],


standalone: true,
    selector: 'app-root',
    template: `<button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Confirm Dialog</button>`
})

export class AppComponent implements OnInit {
    ngOnInit(): void {
        throw new Error('Method not implemented.');
    }
    public DialogObj: any;
    public onOpenDialog = (event: any): void => {
        this.DialogObj = DialogUtility.confirm({
        title: 'Confirmation Dialog',
        content: "This is a Confirmation Dialog!",
        okButton: {  text: 'OK', click: this.okClick.bind(this) },
        cancelButton: {  text: 'Cancel', click: this.cancelClick.bind(this) },
        showCloseIcon: true,
        closeOnEscape: true,
        animationSettings: { effect: 'Zoom' }
    });
    }
    private okClick(): void {
        alert('you clicked OK button');
    }

    private cancelClick(): void {
        //Hide the dialog
        this.DialogObj.hide();
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));