In this article, I’m going to show you how you can create modals and provide them with the ability to act like a “real” page with URL address.

I’m not going to explain what are Auxiliary Routes so if you are not familiar with this feature you can read the documentation.

First, we need to create the modal outlet:

Next, lets’ create ModalComponent so we can reuse the code:

The code is straightforward; we are just using ng-content so we can project different content every time and a click handler for our x button. I will skip the CSS stuff because it’s not relevant.

We are creating the modalClose Output because we want to let our consumers know when the user closes the modal.

When the user clicks on the x button, we call the closeModal method and closing the modal by setting the modal outlet to null then firing the closeModal event.

Now we can create our first modal:

Before we can use the LoginComponent in the modal outlet we need to define the login route:

Create link to open the modal:

Nice! Now we are missing the ability to let the user close the modal for example on submit button. We can solve this problem with the exportAs property. ( you can read more about this feature here )

Now we can access the modal API directly in our template with local variables.

Note that we are listening to the modalClose event, so we can use the data in our LoginComponent when the modal is closed.

Now you have reusable modal with URL address, and you can send this link to anyone like a normal link, and you also can use the back and forward button in your browser.

I’m sure we can make our modal much better, but I wanted to keep it simple for this article.

That’s all!

☞ Please tap or click “︎❤” to help to promote this piece to others.