Dynamic modals with separate URL address

In this article, I’m going to explain how we can create and manage modal dynamically using Angular Material. My current project requires different modals to display different types of information by maintaining separate URL address for each modal that it should act like a real page. To achieve this I have referred https://netbasal.com/give-your-modals-url-address-with-auxiliary-routes-in-angular-eb76497c0bca article and it was so helpful for me. Following are the challenges/requirements that I have faced while implementation so writing this post that might be helpful:

1. Create a generic component which can show different modals. It should be dynamic and reusable.
2. If the modal has a link to any other page, then current modal should close and appropriate page should be shown.
3. In some cases, you don’t want the modal to update navigation history.

So let’s get started! I am simply creating sign-in and sign-up form modals. For this, creating following components:

• App component
• Modal component
• SignIn component
• SignUp component

App Component:

This is the basic parent component to create modal outlet as follows:

We are using auxiliary routes in Angular to achieve our requirement of multiple independent routes in a single app. If you are not familiar with auxiliary routes, you can refer this article. We’ve specified an outlet property named modal in the route for signIn and signUp. This tells the router to render the SignInComponent or SignOut componet using the modal outlet. Here we create routes as follows:

Modal Component:

Create a new component as a ModalComponent as a generic modal component so we can reuse the code. This is the modal template, here we can have common header and footer just the contents will replace dynamically based on which modal we are going to display. For this matter I am using
<ng-content></ng-content>, From Angular 7+, <ng-slot> will replace <ng-content>, to project contents of different modals as follows:

Here we used ‘currentTemplate’ template variable to open our modal, we used this variable as a dialog reference to operate on material modal API’s.

SignIn Component

Using this component, we are creating our sign-in modal containing basic login form with some validations. When user clicks on close button, modal will close by calling ModalComponent’s closePopup() method. Also when user tries to submit the login form we should let the user close the modal, for that we are taking one template variable signInModal as below so that modal component will know which the current template is.

SignUp Component:

We are creating SignUp component same as SignIn. Here I have created basic signup form and in this form added link for login. By clicking this link it should close signUp form & open login form by maintaing URL address in the browser.

Demo:

Now you have reusable and dynamic modal with unique URL address.
You can refer the whole code from : https://github.com/anjalitanpure1993/DynamicModal