Angular–Making a Modal Service by Extending NgbModal

I like the idea of modal dialogs for certain things, especially showing error messages or confirming an action.  Creating (and styling) modal dialogs can vary so much that Angular doesn’t include them out of the box.  There’s a bunch of libraries out there that give you this functionality, including ones that are tied to a presentation framework like Angular’s Material or NgBootstrap. 

I was already using Bootstrap 4, so it made sense to use NgBootstrap’s Modal capabilities.  However, there are a lot of configurations, and I really wanted something that I could just call and await the result (like whether the user pressed “Yes” or “No”).

via GIPHY

Creating a Modal Dialog

The first thing you need to do is create a modal dialog.  Modal dialogs are just components, so that’s pretty straightforward.

Template

There’s a couple of classes that NgbModal provides to help you style your dialog templates:

Note that the x in the corner is not there by default – I added it there.  Here’s the template:

Its pretty easy to expand the template to make more complicated modal dialogs… after all – its just a component!

Component

Here’s the Ok dialog’s component:

Note that we aren’t passing in the properties as @Input() like you might expect.  Since the dialog is going to be created on the fly, we aren’t going to set up the properties on any template itself.  Instead, later we will create a service that will set up the properties we need.

We create the close function to facilitate closing the dialog from within the dialog – that is, from the x in the corner, or from a button press.  For example, if you want to create a yes/no dialog, you can call close(true) when the yes button is pressed, and close(false) when the no button is pressed.  Below, you can see how the Service can be created to react to this true/false and continue the application flow accordingly.

Module

Since these are modal dialogs, they need to be registered in the application module as entry components:

Service

Now we can create a modal dialog service to facilitate the creation of modal dialogs.

You can make the dialog return something meaningful by adding a type to the Promise.  You could easily make a yes/no dialog where you’re returning a Promise<boolean> where true is returned if the Yes button is clicked, and false is returned if the No button is clicked.  Similarly, you could make a more complicated dialog (say, a “new item” dialog for creating a new piece of inventory or something like that) that could return the created object if successful, and null if not.

Service Use

Now to use the service, you can just rely on async/await to resolve the promise and then react based on the returned value:

via GIPHY

This is obviously a really simple example, but hopefully its easy to see how you can expand this paradigm for more complicated dialogs without ripping your hair out.