How to get started easily with Syncfusion Angular 11 Modal Dialog?
The Essential JS 2 Angular Dialog is a useful user interface (UI) component for informing users about critical information, errors, warnings, and questions, as well as confirming decisions and collecting input from users. The component has a rich set of built-in features such as action buttons, positioning, animations, dragging, resizing and templating support. In this knowledge base, we are going to provide details about how to easily integrate Syncfusion Angular Dialog in Angular 11 application and how to enable its commonly used features.
Prerequisites
Before start, we need following items to create Angular Dialog in Angular 11 application
- Node.js (latest version)
- Angular 11
- Angular CLI
- Typescript 4+
- Visual Studio Code for Editor
Installation and application creation
- Install Angular cli 11 using following command.
npm install -g @angular/cli@11.2.3
If you would like to follow and run the application in Angular6 or Angular5 or Angular4, you need to replace the CLI command version number with the corresponding angular version number.
npm install -g @angular/cli@<CLI VERSION>
- Create an Angular 11 application using Angular cli.
ng new angular11-app cd angular11-app
- Serve the Angular 11 application using following command.
ng serve
Listen the application in localhost:4200. Your application will serve in browser. Refer the below example screenshot for Angular 11 version.
Integration of Angular Dialog
- After running the Angular 11 application successfully, configure the Angular Dialog in this application. Install Angular Dialog and EJ2 package using following command.
npm install @syncfusion/ej2-angular-popups --save npm install @syncfusion/ej2 --save
The --save command will instruct the NPM to include a popups package inside the dependencies section of the package.json.
- Import Dialog from installed package in app/app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DialogModule } from '@syncfusion/ej2-angular-popups;
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DialogModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
- You should refer the CSS file for Angular Dialog in style.CSS.
@import "../node_modules/@syncfusion/ej2/material.css";
- Add the Angular Dialog component in app.component.html.
<ejs-dialog></ejs-dialog>
- Now, render the default dialog as like below.
<div class=”control-section”> <ejs-dialog #confirmDialog [buttons]='confirmDlgButtons' [visible]='hidden' [header]='confirmHeader' [animationSettings]='animationSettings' [showCloseIcon]='confirmCloseIcon' [target]='target' [width]='confirmWidth'> <ng-template #content> <span>Are you sure you want to permanently delete these items ?</span> </ng-template> </ejs-dialog> </div>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild('confirmDialog')
public confirmDialog: DialogComponent;
public confirmHeader: string = 'Delete Multiple Items';
public confirmCloseIcon: Boolean = true;
public confirmWidth: string = '400px';
public animationSettings: Object = { effect: 'None' };
public target: string = '.control-section';
public confirmDlgBtnClick: EmitType<object> = () => {
this.confirmDialog.hide();
}
public confirmDlgButtons: Object[] = [{ click: this.confirmDlgBtnClick.bind(this), buttonModel: { content: 'Yes', isPrimary: true } }, { click: this.confirmDlgBtnClick.bind(this), buttonModel: { content: 'No' } }];
// While clicking confirm button, open the confirm Dialog
public confirmBtnClick: EmitType<object> = () => {
this.confirmDialog.show();
}
}
- Now serve the application using following command.
ng serve --open
Once all the files are compiled successfully. It will serve the site at localhost:4200
The following screenshot illustrates this.
Modal Dialog
- The modal dialog forces the user to interact with the dialog before accessing the other elements. For example can be used in login forms and also displaying error, alert messages. You can also close the modal dialog on overlayclick.
<div id=”modalTarget”> <ejs-dialog id="modalDialog" #modalDialog (overlayClick)="overlayClick()” [isModal]='isModal' [header]='header' [target]='target' [width]='width' [buttons]='buttons' [animationSettings]='animationSettings' [content]='content' (open)="modalDlgOpen()" (close)="modalDlgClose()" > </ejs-dialog> <div>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild('modalDialog')
public modalDialog: DialogComponent;
public overlay: CheckBoxComponent;
public target: string = "#modalTarget";
public width: string = '335px';
public header: string = 'Software Update';
public content: string = 'Your current software version is up to date.';
public isModal: Boolean = true;
public animationSettings: Object = { effect: 'None' };
public hide: any;
// Close the Dialog, while clicking "OK" Button of Dialog
public dlgButtonClick: EmitType<object> = () => {
this.modalDialog.hide();
}
public overlayClick: EmitType<object> = () => {
this.modalDialog.hide();
}
// Initialize Button to open the modal Dialog
public buttons: Object[] = [{ click: this.dlgButtonClick.bind(this), buttonModel: { content: 'OK', isPrimary: true } }];
}
The following screenshot illustrates this.
Summary
In this GitHub repository, the application prepared from the above steps has been committed, and it is readily runnable. Also, you can check our Angular Dialog features from this page.
If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
