MessageBox : Just Another Custom Alert Implementation for Angular

Dialog boxes never peeked 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 these framework that you love and hate. For one, it's implementation of Angular Material Dialog Boxes is easy to understand.

Source : Internet

I had years of work relying on Windows Message Boxes for alerting just about anything. A simple call and easy to get results.

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 : ${respone}`);

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 here.

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 at 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 style: 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"});
}simple-dialog.component.ts

The 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 DI, thus, you will notice that I have to pass the MatDialog object as 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();     
  }
}simple-dialog.component.ts

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();
  constructor() { }
  sendMessage(message: string, type = 1) {
    this.message.next({text: message, type: type});
  }
  getMessage(): Observable {
    return this.message.asObservable();
  }
  clearMessage() {
    this.message.next();
  }

}simple-dialog.component.ts

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);
    });

MessageBox.show(this.dialog, `The result is : ${respone}`);

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);
    });

I know, you may have comments or suggestion about the solution. Feel free to hit the comment box. Happy coding!