Skip to main content

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!

Comments

Popular posts from this blog

Hiding Unwanted Python Folders and Files in Visual Studio Code

Visual Studio Code is a universal editor and pretty good at it. However, the explorer view maybe cluttered with the automatically generated folders and files confusing developers. Python is no different. Below are example files and folders generated by Python.

The __pycache__ folder and *.pyc files  are totally unnecessary to the developer. To hide these files from the explorer view, we need to edit the settings.json for VSCode. Add the folder and the files as shown below:
Copy and paste the lines below :

"**/*.pyc":{"when":"$(basename).py"},"**/__pycache__":true

Getting Started with Stateless : A Lightweight Workflow Library Alternative for .NET

A year ago, I was looking for a simple workflow manager for a project I was working. Its a medium sized application that involves tracking the state of assets in the system. Back in 2008, Microsoft (MS) introduced new technologies along with the release of Visual Studio 2008: Windows Presentation Foundation (WPF), Windows Communication Foundation (WCF), and Windows Workflow Foundation(WF). Having worked in a company utilizing mostly MS products for development, my first option was to go with WF. After doing some time reading and studying the library, I paused and decided it was too complex for my requirement. Using WF would be an overkill and the fact that it has, a rather, steep learning curve, there has to be another option. My mind toyed with the idea of developing a simple workflow library myself. It would be a learning experience but it might end up consuming a lot of time.

Why reinvent the wheel? So I started querying the internet for a better solution. I stumbled upon Stateless

Get Started with MongoDB Stitch : The New Backend As Service Offering from MongoDB

Halfway of this year, the guys from MongoDB launch their new backend as service product called MongoDB Stitch. While the launch is just for the beta, the promise of the service is quite interesting. MongoDB has been around for long now and some development stacks have been based on its database product, the MongoDB-ExpressJS-Angular-NodeJS (MEAN) and the MongoDB-ExpressJS-React-NodeJS (MERN) stacks to name a few. These stacks, however, relies on backend technology such as ExpressJS and NodeJS. The idea of provisioning servers and developing the backend solution makes it daunting for small to medium scale applications. MongoDB Atlas, at least made life much easier by providing on cloud database solution, but there must be a simpler solution, right? A solution the would stitch the backend and frontend together ( see what I did there ?).
MongoDB Stitch lets developers focus on building applications rather than on managing data manipulation code, service integration, or backend infrastruct…