Angular 8 Bootstrap 4 | Modal Tutorial By Example

In this tutorial, we will install Ng Bootstrap in the Angular project and learn How to implement Bootstrap Modals in our Angular application.

Modals are dialog box/ popup UI containers which are used to display content on top of other. It floats in the center of the screen which can be closed after actions.

We will use Ng Bootstrap version 4.3.1 compatible with Angular’s version 8.0.0.

Angular Bootstrap Modal will look like this after installation:

What is ng-bootstrap?

NgBootrap is the Angular adapted version of Bootstrap UI components. Using ng-bootstrap we can easily integrate bootstrap library to our Angular project and use it’s awsome UI components very easily.

Why bootstrap is used in angular?

Using Bootstrap in the Angular project makes UI development very smooth. Bootstrap is tried and tested and fully responsive for multiple platforms and screen sizes. Moreover, it is now an industrial standard adopted almost everywhere.

Is angular material better than bootstrap?

According to me for UI development in Angular project Material is recommended due to its compatibility, but personally, I favor NgBootstrap as it is easier and integrate its components and theming or customization proves much simpler then Material components.

 

Let’s start…

Create a new Angular project

For demonstration from scratch, we will create a new Angular project using Ng CLI tool with the latest version

Run following NG command in terminal to create a new Angular project:

Install Bootstrap in Angular Project

Let’s install Bootstrap by running following NPM command. This will install the latest bootstrap version ( Current is 4.3.1 )

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root

 

Import NgbModule ( Bootstrap module ) & FormsModule ( for Angular as we will use [(ngModel)] ) in the app.module.ts file

Use Angular Bootstrap Modal in Component using Template

To Bootstrap modals in components add an ng-template container with the let-modal directive and a TemplateRef variable #mymodal

To open this modal add following button with a (click) event calling the open method which is passing the TemplateRef.

In the component class import NgbModal , ModalDismissReasons and NgbModalOptions classes. Also, add NgbModal in class constructor to provide its methods.

NgbModal provides from methods

open: Opens a new modal window with the specified content and supplied options.

dismissAll: Dismisses all currently displayed modal windows with the supplied reason.

hasOpenModals: Indicates if there are currently any open modal windows in the application.

ModalDismissReasons: It is used to identify the method used to close the modal ie. using ESC key or clicking on Babkdrop area.

NgbModalOptions is used to configure Modal which can have the following properties:

backdrop: It is the shadow created on Modal back, default is true, if set to 'static' then Modal doesn’t close on clicking outside.

backdropClass: Append custom class to modal backdrop element.

beforeDismiss: Callback triggered before modal is dismissed.

centered: If set to true modal is vertically centered, default is false.

container: To specify the element to which new modal is appended, the default is the body.

size: Modal window size can be set with "sm" | "lg" | "xl"

Open Model using Component

Instead of added NgTemplate in the same component which we did above, we can have a separate component to show Modal content for that we simply pass our Modal Component in open method.

Note: Don’t forget to add the modal component in entryComponents array as well in app.module.ts file as these are loaded dynamically.

Check below steps to create:

Step 1) Run following NG command to create a new component mymodalcomponent 

Step 2) Open app.module.ts file to add mymodalcomponent in the declarations as well as in the entryComponents array:

Step 3) In the mymodal.component.ts import NgbActiveModal to use modal methods. Here we are getting Title and Content as dynamic values sent from App component using @input decorators

Step 4) Update mymodal.component.html file with below code. This will show dynamic Title and Content.

Now we will call from App component having a template button with open method:

In app.component.ts file add the open method declaration as shown below:

 

Conclusion: So in the above post, we discussed how to install Ng Bootstrap in Angular project and how to add a Modal using NgTemplate and Component method while passing dynamic values using @input decorator.

 

 

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of