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.
117+ registered 