Bootstrap modal does not pop up in Angular 8

Question

I've worked with modals before and never had such an issue. My bootstrap modal does not pop up. However, it is shown in the bottom of the page, while I want it to pop up just like a modal should do.

My html:

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

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      <p>One fine body&hellip;</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
    </div>
 </ng-template>

My .ts:

import { Component, OnInit } from '@angular/core';
import { NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent {

  constructor(private modalService: NgbModal) { }

  open(content) {
    this.modalService.open(content);
  }
}

and Imports in app.module contain NgbModule of course

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

This is my package.json (sorry it's not formatted as code, stackoverflow does not allow me to paste so much code):

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build --prod --output-path ../expenses/wwwroot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.13",
    "@angular/common": "~8.2.13",
    "@angular/compiler": "~8.2.13",
    "@angular/core": "~8.2.13",
    "@angular/forms": "~8.2.13",
    "@angular/platform-browser": "~8.2.13",
    "@angular/platform-browser-dynamic": "~8.2.13",
    "@angular/router": "~8.2.13",
    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.21",
    "@angular/cli": "~8.3.17",
    "@angular/compiler-cli": "~8.2.13",
    "@angular/language-service": "~8.2.13",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "bootstrap": "^4.4.1",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Any error in the console? If you use Scss, are you sure you included the modals scss file in your build? — JB Nizet, Dec 15 '19 at 12:08
Have you checked this [post](https://stackoverflow.com/questions/49244566/ngbmodal-open-not-working-in-angular-4)? Seems like bootstrap versions are not compatible. — Amit Chigadani, Dec 15 '19 at 13:33
Try to copy & paste the [ng-bootstrap Modal example](https://ng-bootstrap.github.io/#/components/modal/examples), see if it works, then change it to fit your needs. Angular is a rather complicated framework so it's hard to pinpoint the exact problem at times. — FK82, Dec 21 '19 at 14:43
That is exactly what I did. Probably has something to do with not compatible versions, but cannot find any info about that. I'm using Angular 8 and bootstrap 4 — Sofia Bo, Dec 21 '19 at 15:02

score 2 · Accepted Answer · answered Dec 21 '19 at 15:34

2

Well, after many hours of looking for a solution I found out that yes, Bootstrap version was incompatible with Angular version. I had to use ngx-bootstrap library which worked like a charm. Huge thanks to this post which solved my problem.

answered Dec 21 '19 at 15:34

Sofia Bo

679
1
10
20

Santosh Kadam · Answer 2 · 2019-12-16T06:57:40.620

1

In your app module import section add

NgbModule.forRoot()

instead of just NgbModule. Also Make sure that ng-bootstrap version is compatible with angular version.

edited Dec 16 '19 at 06:57

answered Dec 15 '19 at 18:13

Santosh Kadam

1,265
14
14

I tried it, but Angular shows an error when adding .forRoot. Don't remember which one, can't check the code rn. Will update later. – Sofia Bo Dec 16 '19 at 08:24
It simply states that "Property 'forRoot' does not exist on type 'typeof NgbModule'" – Sofia Bo Dec 21 '19 at 09:37

Bootstrap modal does not pop up in Angular 8

2 Answers2