How to create a reusable Modal component in Angular 9 using ng-bootstrap
As I was way into my first full-time position as a Junior Web Developer, I realized that my co-workers were creating a separate component for each dialog required in the application. To me that was unacceptable, so I decided to develop a reusable modal component that would fit the application’s needs.
Before I start, I’d like to thank José Fernando Costa for his article How to create a reusable Modal Dialog component in Angular 8. As I was doing some research online on how to complete my task, I came across his article and although the frameworks used are different, I was still able to use some of his ideas in the solution I built.
We will only focus on the core functionalities of the modal, which are present in the .html and .ts files. If you’re interested in the .css files, you can take a look at the repository here.
Step 0: Setting up the application
Let’s start by installing Angular 9 and creating a brand new application
npm install -g @angular/cli
ng new ng-reusable-modaland then adding ng-bootstrap to the project
cd ng-reusable-modal
ng add @ng-bootstrap/ng-bootstrapStep 1: Creating our Modal Component
We can now dive into the heart of our project, the Modal Component, which we’ll conveniently generate on the terminal:
ng generate component components/modalng-bootstrap provides us with NgbModal, which is a service for modal dialogs that will allow our ModalComponent to do the three things everyone expects modals to do: to open, close and dismiss. We’ll define those actions in modal.component.ts.
As you can see, there’s not much going on at the moment. The controller gets the template of the modal and opens it using the NgbModal service and then uses the NgbModalRef obtained to close or dismiss the modal.
Those are the most basic functionalities, though. We want to be able to personalize our modal and that’s what we need ModalConfig for. We can use it to add a title, a label to our buttons or even decide when to disable them. We’ll include all this in the modal.config.ts file.
As you can see, there are many aspects of our modal we can take care of. The developer who’s using this component can now personalize its title or its two buttons’ lables and define it’s behaviour when closing or dismissing. So we add ModalConfig to our modal component and take a look at how both .ts and .html files change.
You probably noticed that all but the title field in ModalConfig are optional. In fact, we don’t want to make the configuration of our modal tedious, but rather simple. Therefore, we’ll establish a default behaviour in case those fields are missing, which is not to do anything and maintain the basic behaviours described before. In some cases, a behaviour may be defined by an asynchronous function, which is why we use promises to make sure we wait for the result of such function before proceeding.
Step 2: Using our Modal Component
Using the modal we just created is also very simple. As the component is injectable, we only need to include the <modal> tag in the .html file of the component where you want to include the modal. The tag will look like this:
<modal #modal [modalConfig]="modalConfig">
<!-- body of the modal -->
</modal>where modalConfig is the instance of ModalConfig where we specify the behaviours we discussed in Step 1.
In order to open the modal, we make use of its id, which in our case is #modal to get it as an instance of ModalComponent in the .ts file and call its functions. Here’s how we do that:
@ViewChild('modal') private modalComponent: ModalComponentasync openModal() {
return await this.modalComponent.open()
}
The async function openModal() will be called to open the modal with id #modal. Of course, this means you can include multiple modals within the same component, as long as you give them unique ids.
Conclusion
That’s the end of this tutorial on how to create a reusable modal component in Angular 9 and ng-bootstrap. Please, let me know if you have any comments or suggestions on how to improve it.
Happy coding!
