Techies, this page will guide you over how we can use Angular 4 Bootstrap Modal in our Angular 4 App.
Getting Started With Angular 4 Bootstrap Modal
You might aware of how crucial is to use a proper and UI friendly Modal pop up in our application. And Bootstrap is one of the most used UI components for web applications.
So, let’s get started and integrate a Bootstrap Modal in our Angular 4 App.
To start, we need to define an individual component that works as an add-on throughout our Angular 4 app.
1. Set up your Angular 4 app
First of all, we need to set up our project using ng new.
Note: Ignore this command, if you’re having app ready and installed.
ng new angular4-bootstrap-modal
Next, we need to install the needed bootstrap dependencies in our project.
npm install --save @ng-bootstrap/ng-bootstrap
Here, we will create an individual component for Angular 4 Bootstrap Modal.
By doing this, we will be able to integrate or use this component in our existing Angular 4 App.
ng g c NgbdModalBasic
Here, we’ve used short form to create a component.
Suggested: Build Angular Apps Using Angular CLI
2. Define Angular 4 Bootstrap modal component
Here, we’re defining an individual component that will help us to use this component anywhere in our existing Angular 4 App.
src/app/ngbd-modal-basic/ngbd-modal-basic-component.ts
//Import core import {Component} from '@angular/core'; //Import ng-bootstrap dependencies import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-ngbd-modal-basic', templateUrl: './ngbd-modal-basic.component.html' }) export class NgbdModalBasicComponent { closeResult: string; constructor(private modalService: NgbModal) {} open(content) { this.modalService.open(content).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}`; } } }
Next, we also need to define the HTML for the Modal popup.
src/app/ngbd-modal-basic/ngbd-modal-basic-component.html
Moreover, it’s a quite similar bootstrap HTML what we generally use in any other platform.
<ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button> </div> </ng-template> <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button> <hr> <pre>{{closeResult}}</pre>
Now, we’re ready with the add-on of Angular 4 modal dialog.
3. Let’s import ng-bootstrap for Angular 4 Bootstrap Modal
First of all, we will import ng-bootstrap in main module.
src/app/app.module.ts
Here, don’t forget to import NgbModule with .forRoot() method.
//Import browser module import { BrowserModule } from '@angular/platform-browser'; //Import core module import { NgModule } from '@angular/core'; //Import ngb-bootstrap import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; //Import forms module import {FormsModule} from '@angular/forms'; //Import our components import { AppComponent } from './app.component'; import { NgbdModalBasicComponent } from './ngbd-modal-basic/ngbd-modal-basic.component'; @NgModule({ declarations: [ AppComponent, NgbdModalBasicComponent, ], imports: [ BrowserModule, NgbModule.forRoot(), FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
4. Finally, let’s import our component to any other component
Here, we’re going to use our component in App component.
Firstly, let’s import our created component i.e. NgbdModalBasicComponent.
src/app/app.component.ts
//Import core import { Component } from '@angular/core'; //Import bootstrap modal component import { NgbdModalBasicComponent } from './ngbd-modal-basic/ngbd-modal-basic.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular 4 bootstrap modal popup app'; }
Finally, have the selector in app component HTML.
src/app/app.component.html
<app-ngbd-modal-basic></app-ngbd-modal-basic>
Note: Here, don’t forget to import Bootstrap CSS in your index.html
You can import bootstrap CDN URL as well.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
Here we go!
We’re ready to use Angular 4 Bootstrap Modal from scratch or even can integrate in our existing component.
Suggested: Integrated Angular 4 Components like Progressbar, Alerts, etc with ng-bootstrap
Moreover, If you’re still facing any issues with bootstrap modal, you can try this example. Also, you can visit ng-bootstrap document.
Final note, I hope you loved this article and it helped you to integrate Angular 4 Bootstrap Modal in your app.
Feel free to share your comments below, if you’ve any questions/suggestions.
Finally, don’t forget to share this article.
Happy Coding!
I think this is one of the most important information for me.
And I am glad reading your article. But should remark on some general things, The site style is wonderful, the articles are really excellent.
Good job, cheers