Use Angular 4 Bootstrap Modal Popup In Less Than 5 minutes

1

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!

Leave a Reply

1 Comment on "Use Angular 4 Bootstrap Modal Popup In Less Than 5 minutes"

avatar
  Subscribe  
newest oldest most voted
Notify of
Cecila
Guest

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