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

renaming default namespaces for VSTO projects in VS2008

So here is the scenario , you are starting a VSTO project and decided that your default namespace is ExcelAddInTesterApp . You created the project and started coding the project. After several days , your boss called and said "hey marvin , make use of this namespace OurCompany.ExcelAddInTesterApp , we have to add our company name to it got it?" . You get back to your machine thinking its just a simple property just like any project you've been working on. So you right clicked the VSTO project and hit properties . Boom! What the F@#$? The default namespace textbox is disabled!!!!



I've been through this and I googled for ways to do it and ended up with a blog from a Microsoft MVP telling me it can't be done because it is disabled. Then I thought of Refactoring, the beauty and grandeur of the renaming process. I selected the namespace and hit the refactor menu hoping that this would solve the problem . Unfortunately , it did not rather it displayed the message box …

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