{{announcement.body}}
{{announcement.title}}

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

Introduction

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.

Prerequisites

  • 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:

Shell

 

Step 2 

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

Shell

 

Step 3

Install ngx-bootstrap from npm using the following command:

Shell


Or 

Shell

 

This will be added to our root module

Step 4

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

For Bootstrap 3

HTML

 

For Bootstrap 4

HTML

 

Step 5

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

HTML


Step 6 

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

TypeScript


The below code is opening the modal popup:

TypeScript

 

 And the below code is to hide the opened modal:

TypeScript


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:

HTML


Step 8 

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

TypeScript


Now its time for the Output:

Open modal button

Modal displayed

Conclusion

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.

Topics:
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 }}