How to get started easily with Syncfusion Angular 8 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 8 application and how to enable its commonly used features.
Prerequisites
Before start, we need following items to create Angular Dialog in Angular 8 application
Node.js (latest version)
Installation and application creation
Install Angular cli 8 using following command.
npm install -g @angular/cli@8.1.1
If you would like to follow and run the application in Angular7 or 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 8 application using Angular cli.
ng new angular8-app cd angular8-app
Serve the Angular 8 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 8 version.
Integration of Angular Dialog
After running the Angular 8 application successfully, configure the Angular Dialog in this application. Install Angular Dialog and EJ2 package using following command. The --save command will instruct the NPM to include a popups package inside the dependencies section of the package.json.
npm install @syncfusion/ej2-angular-popups --save npm install @syncfusion/ej2 --save
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' [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'> </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 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
Refer to our documentation and online samples for more features. If you have any queries, 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!
Conclusion
I hope you enjoyed learning about how to get started easily with Syncfusion Angular 8 Modal Dialog.
You can refer to our Angular Layout feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Layout example to understand how to create and manipulate data.
For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!
