How to Create a Generic Custom Alert Dialog Box Using Angular and Angular Material
Dialog boxes never piqued my interest in my previous limited web development side projects, the fact that I have never seen the use of it is one reason and there is always the reliable call to Alert, which does the job that I require. Bootstrap’s modal boxes are interesting but did not have time to really dive into it. Then came a chance to learn Angular.
I have been playing with Angular and Angular Material for almost 2 months. Just last month, they literally broke me by breaking some of my codes with its latest release. Don’t start mentioning flex, can’t seem to wrap my head around it. But there’s just this thing about this framework that you love and hate. For one, it’s implementation of Angular Material Dialog Boxes is easy to understand.
I had years of work relying on Windows Message Boxes for alerting just about anything. A simple call and easy to get results. Here’s a C# code to display a message box.
string message = "Do you want to abort this operation?";
string title = "Close Window";
MessageBoxButtons buttons = MessageBoxButtons.AbortRetryIgnore;
DialogResult result = MessageBox.Show(message, title, buttons,
MessageBoxIcon.Warning);Oh, I miss the WinForms day, but things have to move on. So, I tried to mimic the style of call in Angular to display a custom Alert box. Here is my sample call to display the alert box.
MessageBox.show(this.dialog, this.message, this.title,
this.information, this.button,
this.allow_outside_click, this.style,
this.width)
.subscribe( result => {
console.log(result);
});
MessageBox.show(this.dialog, `The result is : ${response}`);MessageBox.show(this.dialog, `Hello, World!`);
Here is my implementation. It may not be the most elegant or most efficient approach but it gives me what I need. By the way, the source code is available at GitHub
The Component
I created one component for the MessageBox UI. It has two available styles: Full and Simple. The UI elements are illustrated below.
Configuration Options:
- Title — Displayed text in the dialogs title bar. It defaults to “Alert”, if not provided. The title bar is only shown when the style is set to “Full”.
- Message — The main message to be shown to the user.
- Information — An optional additional information to be displayed.
- Buttons — The types of buttons to be shown. Currently, it only supports the following: OK, OK/CANCEL, YES/NO, ACCEPT/REJECT.
- Allow Click Outside To Close — Allow users to simply click on any region in the screen outside the dialog box to close it. By default, the users need to click on the buttons to initiate closing.
- Style — Defines the style for the dialog box. It supports two styles: Full and Simple.
- Width — The width of the dialog box.
The DialogBox component does not have complex logic behind. It is designed to display a message and return the user response. When user clicks a button, close the UI and return the result.
onOk() {
this.dialogRef.close({result: "ok"});
}onCancel() {
this.dialogRef.close({result: "cancel"});
}
The MessageBox Static Class
I used a static class to mimic the C# call. A service must have been the better implementation but I opted for the simpler one. The only issue I had with this approach is that a static class cant take advantage of the Dependency Injection, thus, you will notice that I have to pass the MatDialog object as a parameter.
export class MessageBox {
static show(dialog: MatDialog, message, title = "Alert",
information = "", button = 0,
allow_outside_click = false,
style = 0, width = "200px") {
const dialogRef = dialog.open( SimpleDialogComponent, {
data: {
title: title || "Alert",
message: message,
information: information,
button: button || 0,
style: style || 0,
allow_outside_click: allow_outside_click || false
},
width: width
});
return dialogRef.afterClosed();
}
}Notice that the response is returned as an Observable. The consumer of this class needs to subscribe to get the actual response.
The MessageService
In some cases, my application need a message service to fire my dialog box. This is commonly used to display a message as a result of a completion of a process from another service. Here is a simple message service to do the job.
@Injectable()
export class MessageService {
private message = new Subject<any>(); constructor() { } // the type can be used in case you want to classify the alert
sendMessage(message: string, type = 1) {
this.message.next({text: message, type: type});
} getMessage(): Observable<any> {
return this.message.asObservable();
} clearMessage() {
this.message.next();
}
}
How to Use MessageBox
We can simply call the MessageBox.show() method directly on your code.
MessageBox.show(this.dialog, this.message, this.title,
this.information, this.button,
this.allow_outside_click, this.style,
this.width)
.subscribe( result => {
console.log(result);
});Or, if you wanted to use a message service.
onSendService() {
this.messageService.sendMessage(this.message);
}Just make sure you have subscribed to the service.
this.subscriber = this.messageService.getMessage()
.subscribe(message => {
MessageBox.show(this.dialog, message.text);
});If you may have comments or suggestion about the solution, feel free to hit the comment box. Happy coding!
This post was updated December 11, 2017 to add the message service implementation.
This article is also posted on my personal blog.
If this post helped you in anyway, please click the clap 👏 button below a few times to show your support!
