Use of Ngx-Bootstrap Modal Popup in Angular 8

DZone 's Guide to

Use of Ngx-Bootstrap Modal Popup in Angular 8

In this article, we discuss how to use ngx-bootstrap to work with modals in Angular 8 for more dynamic UX.

· Web Dev Zone ·
Free Resource


Ngx-Bootstrap has given a package for an open-source tool that contains all core components powered by Angular. In this article, we will learn about the Modal component, which is a cool feature of Ngx-bootstrap. 

What Is a Modal Popup?

A modal is a component that is displayed as a popup dialog box over the page.


  • Basic knowledge of Angular.
  • Visual Studio Code must be installed.
  • Angular CLI must be installed.
  • Node must be installed.

Step 1 

Let's create a new Angular project using the following NPM command:



Step 2 

Now, let's create a new component using the following command:



Step 3

Install ngx-bootstrap from npm using the following command:





This will be added to our root module

Step 4

Now, let's add Bootstrap styles in our index.html file.

For Bootstrap 3



For Bootstrap 4



Step 5

Let's add the template in our ngx-bootstrap-modal.component.html.


Step 6 

Now, open the ngx-bootstrap-modal.component.ts file and add the following code in this file:


The below code is opening the modal popup:



 And the below code is to hide the opened modal:


Here, #template is the template reference that works like a trigger for the modal popup. With that, the template reference name modal is popping up.

Step 7

Now, open the app.component.html file and add the following code:


Step 8 

Let's open the app.module.ts file and add the following code:


Now its time for the Output:

Open modal button

Modal displayed


In this article, we have seen the Ngx-Bootstrap Modal Popup in Angular 8 Application.

Please give your valuable feedback/comments/questions about this article, and please let me know how to improve it.

angular 8, bootstrap, modal, ngx, tutorial, typescript, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}