Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

Opening popup using Angular and Bootstrap

gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. In this blog, we will use Angular to add input fields dynamically.

This tutorial will require you to have some familiarity with the Basic Concepts of Angular. If you are new to it, getting familiar with the basics is recommended by referring to our blog- Introduction to AngularJS.

Let’s get started!!

The addition of bootstrap in the Angular application is a very easy process. We just need to write only one command in the Angular CLI and our work is done. On writing this line, bootstrap will get added to the node_modules folder. 

Installation

ng add @ng-bootstrap/ng-bootstrap

Approach:

After importing the NgbModal module in the TypeScript file of the corresponding component, now it's time to write the code for the popup model by using the above module in the html file of the corresponding component.

Syntax:

Let’s have a look at the syntax for importing the NgbModal inside the Typescript file and the HTML files.

For typescript files:

import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

 

For HTML files:

<ng-template #content let-modal>
  ...
</ng-template>

 

Let’s take an example for a better understanding.

import {Component} from '@angular/core';

import {NgbModal, ModalDismissReasons}
from '@ng-bootstrap/ng-bootstrap';

@Component({
selector: 'ngbd-modal-basic',
templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
closeResult = '';

constructor(private modalService: NgbModal) {}

open(content) {
this.modalService.open(content,
{ariaLabelledBy: 'modal-basic-title'}).result.then((result)
=> {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult =
`Dismissed ${this.getDismissReason(reason)}`;
});
}

private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
else {
return `with: ${reason}`;
}
}
}

 

Now, we will be using ng-template for constructing the model which will be creating the popup. For that, we will be creating a modal-basic.html file.

<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title"
id="modal-basic-title">
</h4>
<button type="button" class="close"
aria-label="Close" (click)=
"modal.dismiss('Cross click')">

</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="dateOfBirth">
Date of birth
</label>
<div class="input-group">
<input id="dateOfBirth"
class="form-control"
placeholder="yyyy-mm-dd"
name="dp" ngbDatepicker
#dp="ngbDatepicker">

<div class="input-group-append">
<button class="btn
btn-outline-secondary calendar"
(click)="dp.toggle()"
type="button">
</button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-outline-dark"
(click)="modal.close('Save click')">
Save
</button>
</div>
</ng-template>

<button class="btn btn-lg btn-outline-primary"
(click)="open(content)">
Popup using Angular and Bootstrap
</button>

 

Output:

When you click on the button above, a popup will be displayed as shown below.






 

Frequently asked questions

Q1) The angularJS is an open framework. Comment on its favor?

Ans 1) AngularJS is a JavaScript-based open-source front-end web framework. This framework is responsible for developing single-page applications. The maintenance work is performed by Google and a community of individuals and corporations.

Q2) What is the use of adding Bootstrap to our web pages?

Ans 2) Bootstrap includes HTML, CSS, and JS libraries whose prime task is to simplify the development of informative web pages. The primary benefit of using Bootstrap in our web pages is to apply Bootstrap’s color, font, size, and layout.

Q3) How Bootstrap can be enabled in HTML?

Ans 3)Bootstrap can be enabled in HTML using one of the following three methods:

  • Add Bootstrap CDN to the head tag of your HTML file.
  • Download files locally to your project folder.
  • Using package manager to import bootstrap to HTML.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Key takeaways

In this article we saw how to add Bootstrap in Angular Application then we saw the implementation of opening popup using Angular and Bootstrap. In the end some FAQs were also discussed. Keeping the theoretical knowledge at our fingertips helps us get about half the work done. To gain complete understanding, practice is a must. To achieve thorough knowledge on full-stack web development you may refer to our full-stack web development course.

Previous article
How to detect when an @Input() value changes in Angular
Next article
How to Reload/Re-render the Entire Page Using AngularJS?
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass