Ng-bootstrap modal not showing

Question

My goal is to open a modal in angular when I press a button. I decided to use ng-bootstrap for this. I went to their website and decided to copy paste the default modal code into my application.

The button is showing and when I click it, the screen moves a little bit, but there is no modal to be seen. When I click the button a second time I get a feedback Dismissed by clicking on a backdrop. The console shows me no errors.

Does anyone know how to fix this?

image of what the webpage looks like

homepage HTML file: the ng-template is the modal

<div class="col-md-8 col-md-offset-2">
<h5>Welcome to MovieMeter! <span *ngIf="isLoggedIn"> You are logged in as {{fullName}}</span></h5>
    <br>

    <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">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p>One fine body&hellip;</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>

        <h3>Trailers:</h3>
        <hr>
        <ul>
            <li *ngFor="let trailer of trailers">
                <img src="{{trailer.body.items[0].snippet.thumbnails.high.url}}" alt="nope">
                <div class="trailerTitle"><h5>{{trailer.movie.title}}</h5></div>
            </li>
        </ul>
    <app-cinema-featured></app-cinema-featured>

</div>

Home.component.ts

import {Component, OnInit} from "@angular/core";
import {AuthService} from "../auth/auth.service";
import {MovieService} from "../movie/movie.service";
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
    styleUrls: ['./home.component.css'],
    selector: 'app-home',
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

    isLoggedIn:Boolean;
    fullName;
    trailers;
    closeResult: string;


    constructor(private modalService:NgbModal, private authService: AuthService, private movieService: MovieService){}

    ngOnInit(){
        if (localStorage.getItem('token') !== null || undefined){
            this.isLoggedIn = true;
            this.fullName = localStorage.getItem('fullName');
        }
        // get the thumbnails and links of the three most recent movie trailers via the youtube API
        this.movieService.getTrailers()
            .subscribe(trailers => {
                this.trailers = trailers.result;
                console.log(this.trailers);
            })
    }

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

Update: this are the elements in the console after I clicked the button. The ng backdrop and ng-modal are showing, but cannot be seen.

Answer 1

//1. The modal component has to be registered in entryComponents (angualr 8 and prev)

 entryComponents: [
    YourModalComponent
  ],
  providers: [
   ...]

//2. also the model directly inputted in the open:
  openConfirmUpdateModal() {
 this.modalService.open( YourModalComponent);
 }
   

Answer 2

After trying a lot of things I discovered that I needed bootstrap 4 instead of bootstrap 3.

Answer 3

Try to use @ViewChild to select the modal in your component code:

HTML

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

TS

 @ViewChild("content") content: NgbModal;

 open() {
        this.modalService.open(this.content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
    }