title: Ng-bootstrap modal not showing
body: <p>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. </p>
  
  <p>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 <em>Dismissed by clicking on a backdrop</em>. The console shows me no errors.</p>
  
  <p>Does anyone know how to fix this?</p>
  
  <p><strong>image of what the webpage looks like</strong></p>
  
  <p><a href="https://i.stack.imgur.com/294aF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/294aF.png" alt="enter image description here"></a></p>
  
  <p><strong>homepage HTML file: the ng-template is the modal</strong></p>
  
  <pre><code>&lt;div class="col-md-8 col-md-offset-2"&gt;
  &lt;h5&gt;Welcome to MovieMeter! &lt;span *ngIf="isLoggedIn"&gt; You are logged in as {{fullName}}&lt;/span&gt;&lt;/h5&gt;
      &lt;br&gt;
  
      &lt;ng-template #content let-c="close" let-d="dismiss"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
              &lt;button type="button" class="close" aria-label="Close" (click)="d('Cross click')"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-outline-dark" (click)="c('Close click')"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/ng-template&gt;
  
      &lt;button class="btn btn-lg btn-outline-primary" (click)="open(content)"&gt;Launch demo modal&lt;/button&gt;
  
      &lt;hr&gt;
  
      &lt;pre&gt;{{closeResult}}&lt;/pre&gt;
  
          &lt;h3&gt;Trailers:&lt;/h3&gt;
          &lt;hr&gt;
          &lt;ul&gt;
              &lt;li *ngFor="let trailer of trailers"&gt;
                  &lt;img src="{{trailer.body.items[0].snippet.thumbnails.high.url}}" alt="nope"&gt;
                  &lt;div class="trailerTitle"&gt;&lt;h5&gt;{{trailer.movie.title}}&lt;/h5&gt;&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;app-cinema-featured&gt;&lt;/app-cinema-featured&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Home.component.ts</strong></p>
  
  <pre><code>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 =&gt; {
                  this.trailers = trailers.result;
                  console.log(this.trailers);
              })
      }
  
      open(content) {
          this.modalService.open(content).result.then((result) =&gt; {
              this.closeResult = `Closed with: ${result}`;
          }, (reason) =&gt; {
              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}`;
          }
      }
  }
  </code></pre>
  
  <p><strong>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.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/HfSK0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HfSK0.png" alt="enter image description here"></a></p>