Getting started with Angular Dialog component

25 Jul 202422 minutes to read

This section explains the steps to create a simple Dialog component and configure its available functionalities in Angular.

Getting Started with Angular CLI

The following section explains the steps required to create a simple angular-cli application and how to configure Dialog component.

Prerequisites

To get started with Syncfusion Angular UI Components, make sure that you have compatible versions of Angular and TypeScript.

• Angular : 6+
• TypeScript : 2.6+

Setting up an Angular project

Angular provides an easiest way to setup project using Angular CLI Angular CLI tool.

Install the CLI application globally in your machine.

  npm install -g @angular/cli

Create a new application

  ng new syncfusion-angular-app

Once you have executed the above command you may ask for following options,

• Would you like to add Angular routing?
• Which stylesheet format would you like to use?

By default, it install the CSS style base application. To setup with SCSS, pass –style=SCSS argument on create project.

Example code snippet.

  ng new syncfusion-angular-app --style=SCSS

Use below command to Navigate into the created project folder.

  cd syncfusion-angular-app

Installing Syncfusion Popups package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the Angular Syncfusion package from npm link.

Currently, Syncfusion provides two types of package structures for Angular components,

1. Ivy library distribution package format
2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.

Ivy library distribution package

Syncfusion Angular packages(>=20.2.36) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.

Add @syncfusion/ej2-angular-popups package to the application.

npm install @syncfusion/ej2-angular-popups --save

Angular compatibility compiled package(ngcc)

For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc package use the below.

Add @syncfusion/ej2-angular-popups@ngcc package to the application.

npm install @syncfusion/ej2-angular-popups@ngcc --save

To mention the ngcc package in the package.json file, add the suffix -ngcc with the package version as below.

@syncfusion/ej2-angular-popups:"20.2.38-ngcc"

Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

Adding Dialog module

Once you have successfully installed the popups package, the component modules are ready to configure in your application from the installed location. Syncfusion Angular package provides two different types of ngModules.

Refer to Ng-Module to learn about ngModules.

Refer to the following snippet to import the DialogModule in app.module.ts from the @syncfusion/ej2-angular-popups.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Imported syncfusion DialogModule from popups package
import { DialogModule } from '@syncfusion/ej2-angular-popups';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // Registering EJ2 Dialog Module
    DialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding Dialog component

Add the Dialog component snippet in app.component.ts as follows.

import { Component, ViewChild, OnInit, ElementRef  } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-root',
  template: `
    <div id="dialog-container">
        <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open
          Dialog</button>
        <ejs-dialog id='dialog' #ejDialog target="#dialog-container" [showCloseIcon]='true' content='This is a Dialog content'
          width='350px'>
        </ejs-dialog>
    </div>`
})
export class AppComponent implements OnInit {
  // Create element reference for dialog target element.
  @ViewChild('ejDialog') ejDialog: DialogComponent;
  
  public onOpenDialog = function(event: any): void {
      // Call the show method to open the Dialog
      this.ejDialog.show();
  };
}

Add following styles in corresponding css file. The below mentioned styles are used in styles.css file,

#dialog-container {
    height: 500px;
}

Note: Please do the necessary change in index.html file. In this demo we used id selector in <app-root id='dialog-container'></app-root>

Adding CSS reference

The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using following code.

       @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
       @import '../node_modules/@syncfusion/ej2-icons/styles/material.css';
       @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
       @import '../node_modules/@syncfusion/ej2-angular-popups/styles/material.css';

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.

Running the application

Run the ng serve command in command window, it will serve your application and you can open the browser window. Output will appear as follows.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'



import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
imports: [
        
		DialogModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
      <div id="dialog-container">
        <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
        <ejs-dialog id='dialog' #ejDialog target="#dialog-container" [showCloseIcon]='true' content='This is a Dialog content'
          width='350px'>
      </ejs-dialog>
      </div>`
})

export class AppComponent implements OnInit {
  // Reference the Dialog element
  @ViewChild('ejDialog') ejDialog: DialogComponent | any;

  // Show the Dialog when click the button
  public onOpenDialog = (event: any): void => {
      this.ejDialog.show();
  };
}

main.ts

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

In the dialog control, max-height is calculated based on the dialog target element height. If the target property is not configured, the document.body is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element.
If the dialog is rendered based on the body, then the dialog will get the height based on its body element height. If the height of the dialog is larger than the body height, then the dialog’s height will not be set. For this scenario, we can set the CSS style for the html and body to get the dialog height.

html, body {
   height: 100%;
}

Modal Dialog

A modal shows an overlay behind the Dialog. So, the user should interact the Dialog compulsory before interacting with the remaining content in an application.

While the user clicks the overlay, the action can be handled through the overlayClick event. In the below sample the Dialog close action is performed while clicking on the overlay.

When the modal Dialog is opened, the Dialog’s target scrolling will be disabled. The scrolling will be enabled again once close the Dialog.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'




import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
imports: [
        
		DialogModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
      <div id="dialog-container">
        <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Modal Dialog</button>
        <ejs-dialog id='dialog' #ejDialog target="#dialog-container" isModal='true' header='Dialog' [showCloseIcon]='true' content='This is a Dialog content'
          width='350px' (overlayClick)="onOverlayClick()">
        </ejs-dialog>
      </div>`
})

export class AppComponent implements OnInit {
  // Reference the Dialog element
  @ViewChild('ejDialog') ejDialog: DialogComponent | any;

  // Show the Dialog when click the button
  public onOpenDialog = (event: any): void => {
      this.ejDialog.show();
  };

  // Hide the Dialog when click the Dialog overlay
  public onOverlayClick() {
      this.ejDialog.hide();
  }
}

main.ts

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

Enable header

The Dialog header can be enabled by adding the header content as text or HTML content through the header property.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'



import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
imports: [
        
		DialogModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
      <div id="dialog-container">
        <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
        <ejs-dialog id='dialog' #ejDialog target="#dialog-container" header='Dialog' [showCloseIcon]='true' content='This is a Dialog content'
          width='350px'">
        </ejs-dialog>
      </div>`
})

export class AppComponent implements OnInit {
  // Reference the Dialog element
  @ViewChild('ejDialog') ejDialog: DialogComponent |any;

  // Show the Dialog when click the button
  public onOpenDialog = (event: any): void => {
    this.ejDialog.show();
  };
}

main.ts

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

Enable default footer Buttons

The Dialog provides built-in support to render the buttons on the footer (for ex: ‘OK’ or ‘Cancel’ buttons). Each Dialog button allows the user to perform any action while clicking on it.

The primary button will be focused automatically when open the Dialog and add the click event to handle the actions

When the Dialog initialize with more than one primary buttons, the first primary button gets focus on open the Dialog.

The below sample render with button and its click event.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'




import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
imports: [
        
		DialogModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
      <div id="dialog-container">
        <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
        <ejs-dialog id='dialog' #ejDialog target="#dialog-container" header='Dialog' [showCloseIcon]='true' content='This is a Dialog with button and primary button'
          width='350px' [buttons]='buttons'>
      </ejs-dialog>
      </div>`
})

export class AppComponent implements OnInit {
  // Reference the Dialog element
     @ViewChild('ejDialog') ejDialog: DialogComponent | any;

  // Show the Dialog when click the button
  public onOpenDialog = (event: any): void => {
    this.ejDialog.show();
  };

  // Enables the footer buttons
  public buttons: Object = [
    {
      'click': this.hideDialog.bind(this),
      // Accessing button component properties by buttonModel property
        buttonModel:{
        content: 'OK',
        // Enables the primary button
        isPrimary: true
      }
    },
    {
      'click': this.hideDialog.bind(this),
      buttonModel: {
        content: 'Cancel'
      }
    }
  ];

  // Hide the Dialog when click the footer button.
  public hideDialog() {
    this.ejDialog.hide();
}
}

main.ts

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

Draggable

The Angular Dialog supports to drag within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically.

The Dialog can be draggable only when the Dialog header is enabled.
From 16.2.x version, enabled draggable support for modal Dialog also.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'



import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
imports: [

		DialogModule
    ],


standalone: true,
  selector: 'app-root',
  template: `
    <div id="dialog-container">
      <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
      <ejs-dialog id='dialog' #ejDialog target="#dialog-container" allowDragging='true' header='Dialog' [showCloseIcon]='true'
        content='This is a Dialog with drag enabled' width='350px'>
      </ejs-dialog>
    </div>`
})

export class AppComponent implements OnInit {
  // Reference the Dialog element
  @ViewChild('ejDialog') ejDialog: DialogComponent | any;

  // Show the Dialog when click the button
  public onOpenDialog = (event: any): void => {
    this.ejDialog.show();
  };
}

main.ts

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

Positioning

The Angular Dialog can be positioned using the position property by providing the X and Y co-ordinates. It can be positioned inside the target of the container or <body> of the element based on the given X and Y values.

• for X is: left, center, right (or) any offset value
• for Y is: top, center, bottom (or) any offset value

The below example demonstrates the different Dialog positions.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'




import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
imports: [
        
		DialogModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
      <div id="dialog-container">
        <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
        <ejs-dialog id='dialog' #ejDialog target="#dialog-container" [position]='position' header='Dialog' [showCloseIcon]='true'
          content='This is a Dialog with drag enabled' width='350px'>
       <ng-template #header>
            <span>Choose a Dialog Position</span>
        </ng-template>
        <ng-template #content>
          <table style="width:320px;padding:18px; padding-top:0px;">
            <tr>
                <td><input type="radio" name="xy" (click)="changePosition($event)" value="left top" checked="true">left top
                </td>
                <td><input type="radio" name="xy" (click)="changePosition($event)" value="center top">center top</td>
                <td><input type="radio" name="xy" (click)="changePosition($event)" value="right top">right top</td>
              </tr>
              <tr>
              <td><input type="radio" name="xy" (click)="changePosition($event)" value="left center">left center</td>
              <td><input type="radio" name="xy" (click)="changePosition($event)" value="center center">center center</td>
                <td><input type="radio" name="xy" (click)="changePosition($event)" value="right center">right center</td>
              </tr>
              <tr>
              <td><input type="radio" name="xy" (click)="changePosition($event)" value="left bottom">left bottom</td>
              <td><input type="radio" name="xy" (click)="changePosition($event)" value="center bottom">center bottom</td>
              <td><input type="radio" name="xy" (click)="changePosition($event)" value="right bottom">right bottom</td>
              </tr>
          </table>
        </ng-template>
        <ng-template #footerTemplate>
            <span id="posvalue" style="float:left; padding-left:10px;">Position: "Left", "Top"</span>
        </ng-template>
      </ejs-dialog>
      </div>
        `
})

export class AppComponent implements OnInit {
  // Reference the Dialog element
    @ViewChild('ejDialog') ejDialog: DialogComponent |any;

    // Set Dialog position
    public position: object={ X: 'left', Y: 'top' };

  // Show the Dialog when click the button
    public onOpenDialog = (event: any): void => {
        this.ejDialog.show();
  };

    public changePosition = (event: any): void =>{
      this.ejDialog.position = { X: event.currentTarget.value.split(" ")[0], Y: event.currentTarget.value.split(" ")[1] };
      document.getElementById("posvalue")!.innerHTML = 'Position: {X: "' + event.currentTarget.value.split(" ")[0] + '", Y: "' + event.currentTarget.value.split(" ")[1] + '"}';
    }
}

main.ts

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

You can refer to our Angular Dialog feature tour page for its groundbreaking feature representations. You can also explore our Angular Dialog example that shows how to render the dialog.

See Also

• Load dialog content using AJAX
• How to position the dialog on center of the page on scrolling
• Prevent closing of modal dialog
• Close dialog while click on outside of dialog
• How to make a reusable alert and confirm dialog