Angular 6 Bootstrap modal popup not working

Question

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 https://ng-bootstrap.github.io/#/components/modal/examples 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": [
          "../node_modules/jquery/dist/jquery.min.js"

        ]

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

Home.component.html

<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>
        </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)">Launch demo modal</button>

    <hr>

    <pre>{{closeResult}}</pre>

home.component.ts

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

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

declare var $:any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})

  export class HomeComponent {
    closeResult: string;

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

app.module.ts

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';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

enter image description here

Answer 1

My problem was in :

angular.json just change sorting for scripts files included under project .

     "scripts": [
          "node_modules/jquery/dist/jquery.js"
          "node_modules/bootstrap/dist/js/bootstrap.js",
        ]

to be like this :

     "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.js",
           "node_modules/jquery/dist/jquery.js"
        ]

Answer 2

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.

https://www.youtube.com/watch?v=xgc1vnEcPCw

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

Answer 3

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

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
  ],

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

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