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.
Let’s create a new Angular project using the following NPM command:
Now, let’s create a new component using the following command:
npm using the following command:
This will be added to our root module
Now, let’s add Bootstrap styles in our index.html file.
For Bootstrap 3
For Bootstrap 4
Let’s add the template in our ngx-bootstrap-modal.component.html.
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:
#template is the template reference that works like a trigger for the modal popup. With that, the template reference name modal is popping up.
Now, open the app.component.html file and add the following code:
Let’s open the app.module.ts file and add the following code:
Now its time for the Output:
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.