Use Angular 4 Bootstrap Modal Popup In Less Than 5 minutes

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.

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.

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!