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.

Source link

Write A Comment