How to create Confirm, Alert, and Prompt dialog using Angular service?
You can create and show different types of a dialog using angular service. We showcased the following dialogs in this KB article.
- Confirm dialog
- Alert dialog
- Prompt dialog
What is angular service and why we need to use it?
The angular service which helps us to maintain some common business logic as a single module. You can reuse it at any other components in an application. So, it will increase code reusability to keep your application simple.
Refer following code examples to show an alert, confirmation and prompt dialog using angular service.
Step 1: Create a common reusable dialog service.
Create a reusable service under dialog.service folder named dialog.ts and add the following code.
import { Injectable } from '@angular/core';
import { Dialog, DialogModel } from '@syncfusion/ej2-popups';
@Injectable()
export class DialogService {
public dialogInstance: Dialog;
public dialogObj: Dialog;
constructor() { }
createDialog: Function = (element: HTMLElement, model: DialogModel): Dialog => {
if (!element.classList.contains('e-dialog')) {
model.showCloseIcon = true;
this.dialogObj = new Dialog(model, element);
}
return this.dialogObj
};
showDialog: Function = (elemnet: HTMLElement, model: DialogModel) => {
this.dialogInstance = this.createDialog(elemnet, model);
this.dialogInstance.show();
}
hideDialog: Function = () => {
if (this.dialogInstance) {
this.dialogInstance.hide();
}
}
}
Now you can pass the target element and dialog model to the showDialog() method in dialog service. Based on the dialog model, you can customize header, content, buttons, etc. of dialog components as required.
Confirmation dialog
Create confirm.component.ts under views/confirm folder and add following code to render Angular confirmation dialog.
import { Component, ElementRef,ViewChild } from '@angular/core';
import { Http } from '@angular/http';
import { DialogService} from './../../dialog.service/dialog';
@Component({
selector: 'confirm',
template: `
<div>
<h3>Confirm Dialog</h3>
</div>
<button class="e-btn" (click)="this.showBtnClick($event)">Show Confirm Dialog</button>
<button class="e-btn" (click)="this.hideBtnClick($event)">Close Dialog</button>
<div id="dialogContainer">
<div id="cofirmDialog" #dialog></div>
</div>
`,
})
export class ConfirmDialogComponent {
users;
@ViewChild("dialog") dialog: ElementRef;
constructor(private dialogService: DialogService) {
}
showBtnClick(e) {
this.dialogService.showDialog(this.dialog.nativeElement, {
content: 'Are you sure you want to permanently delete these items?',
header: "Delete Multiple Items",
buttons: [{ click: this.hideBtnClick.bind(this), buttonModel: { content: 'Yes', isPrimary: true } }, { click: this.hideBtnClick.bind(this), buttonModel: { content: 'No' } }]
});
}
hideBtnClick(e) {
this.dialogService.hideDialog();
}
}
Alert dialog
Create alert.component.ts under views/alert folder and add the following code to render Angular alert dialog.
import { Component, ElementRef,ViewChild } from '@angular/core';
import { Http } from '@angular/http';
import { DialogService} from './../../dialog.service/dialog';
@Component({
selector: 'alert',
template: `
<div>
<h3>Alert Dialog</h3>
</div>
<button class="e-btn" (click)="this.showBtn($event)">Show Alert Dialog</button>
<button class="e-btn" (click)="this.hideBtn($event)">Close Dialog</button>
<div id="dialogContainer">
<div id="alertDialog" #dialogAlert></div>
</div>
`,
})
export class AlertDialogComponent {
@ViewChild("dialogAlert") dialogTarget: ElementRef;
constructor(private dialogService: DialogService) {
}
showBtn(e) {
this.dialogService.showDialog(this.dialogTarget.nativeElement, {
content: '10% of battery remaining',
header: 'Low Battery',
buttons: [{ click: this.hideBtn.bind(this), buttonModel: { content: 'Dismiss', isPrimary: true } }]
});
}
hideBtn(e) {
this.dialogService.hideDialog();
}
}
Prompt dialog
Create prompt.component.ts under views/alert folder and add following code to render Angular prompt dialog.
import { Component, ElementRef,ViewChild } from '@angular/core';
import { Http } from '@angular/http';
import { DialogService} from './../../dialog.service/dialog';
@Component({
selector: 'prompt',
template: `
<div>
<h3>Prompt Dialog</h3>
</div>
<button class="e-btn" (click)="this.showClick($event)">Show Prompt Dialog</button>
<button class="e-btn" (click)="this.hideClick($event)">Close Dialog</button>
<div id="dialogContainer">
<div id="promptDialog" #dialogLog></div>
</div>
`,
})
export class PromptDialogComponent {
@ViewChild("dialogLog") dialogLog: ElementRef;
constructor(private dialogService: DialogService) {
}
showClick(e) {
this.dialogService.showDialog(this.dialogLog.nativeElement, {
content: `<table style="border-collapse: separate;border-spacing: 10px;width:85%;margin: 0px -5px 0px;">
<tr>
<td>SSID:</td>
</tr>
<tr>
<td><b>AndroidAP</b></td>
</tr>
<tr>
<td>Password:</td>
</tr>
<tr>
<td><span class="e-input-group">
<input type="password" #password id="password" (focus)='onFocus()' (blur)='onBlur()' name="Required" class="e-input" />
</span></td>
</tr>
</table>`,
header: 'Join Wi-Fi network',
buttons: [{ click: this.hideClick.bind(this), buttonModel: { content: 'Connect', isPrimary: true } }, { click: this.hideClick.bind(this), buttonModel: { content: 'Cancel' } }]
});
}
hideClick(e) {
this.dialogService.hideDialog();
}
}
You can see the final demo of the confirmation, alert and prompt dialog which are created from the injectable dialog service.
Live Demo: https://stackblitz.com/edit/reusable-angular-dialog-service
Conclusion
I hope you enjoyed learning about how to create Confirm, Alert, and Prompt dialog using Angular service.
You can refer to our Angular Dialog 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 Dialog example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other 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!
