Angular 6 Bootstrap modal popup not working

I got a Angular 6 application and trying to get a Bootstrap modal popup to work but no luck so far. I following the tutorial on and read some of the issues posted on stackedoverflow but still no luck. So far, when I click on the button, UI is displayed on the page but not as a modal dialog.

Any help is greatly appreciated. Thanks

I installed jquery and placed it in my angular.json

        "scripts": [


I installed with npm install --save @ng-bootstrap/ng-bootstrap


<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" 

    (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
      <div class="modal-body">
          <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 class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>

    <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>




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

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

declare var $:any;

  selector: 'app-home',
  templateUrl: './home.component.html'

  export class HomeComponent {
    closeResult: string;

    constructor(private modalService: NgbModal) {}

    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}`;


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

enter image description here

2 answers

  • answered 2018-10-11 19:26 Vivek Kumar

    Can you also import FormModule in app.module.ts file

      imports: [
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';

    Please paste the chrome devtools error/warning if any, or ng serve/build error, if any

  • answered 2018-10-12 11:45 c0micrage

    I found bits of information on several stackoverflow posts but it did not fixed my issues. I finally started looking at youtube vids and this help go me past this issues.

    I need to add the bootstrap dependency. Hope this helps someone else.