title: ngx-bootstrap Bootstrap4: after closing modal is still there
body: <p>I have a problem using ngx-bootstrap with Bootstrap 4: after successfully opening a modal, if I close it I can see the backdrop covering all my page, so my app gets unusable.</p>
  
  <p>If I use the config parameter { backdrop: false } when I open the modal... when I close it no backdrop is visible, but body element gets modal-open class, so again my app is totally unusable.</p>
  
  <p>There's the code:</p>
  
  <p>Component: product-list.component.ts</p>
  
  <pre><code>import { Component, OnInit, TemplateRef } from '@angular/core';
  import { BsModalService } from 'ngx-bootstrap/modal';
  import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
  
  import { config } from '../config'
  import { ProductService } from '../product/product.service';
  import { Product } from '../product/product';
  
  @Component({
      selector: 'app-product-list',
      templateUrl: './product-list.component.html',
      styleUrls: ['./product-list.component.css'],
      providers: [ProductService, BsModalService]
  })
  
  export class ProductListComponent implements OnInit {
  
      loadedProducts: Array&lt;Product&gt; = [];
  
      public modalRef: BsModalRef;
  
      constructor(
          private productService: ProductService,
          private modalService: BsModalService) {
      }
  
      ngOnInit() {
  
          this.productService.loadProductList().then(
              serverProducts =&gt; this.loadedProducts = serverProducts);
  
      }
  
      deleteButtonClicked(product2BeDeleted: Product,
          confirmDeleteModalTemplate: TemplateRef&lt;any&gt;): void {
  
          if (config.showConfirmDeleteModal) {
              this.modalRef = this.modalService.show(confirmDeleteModalTemplate);
          }
  
      }
  
  }
  </code></pre>
  
  <p>Component template: product-list.component.html</p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;div class="card-block"&gt;
  
          &lt;h4 class="card-title"&gt;Listado de productos&lt;/h4&gt;
  
          &lt;div *ngIf="loadedProducts.length == 0" class="alert alert-warning" role="alert"&gt;
              &lt;span class="fa fa-warning"&gt;&lt;/span&gt; No hay productos disponibles
          &lt;/div&gt;
  
          &lt;table *ngIf="loadedProducts.length &gt; 0" class="table table-striped"&gt;
  
              &lt;thead class="thead-inverse"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;&lt;/th&gt;
                      &lt;th&gt;SKU&lt;/th&gt;
                      &lt;th&gt;Nombre&lt;/th&gt;
                      &lt;th&gt;Precio&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
  
                  &lt;tr *ngFor="let productRow of loadedProducts"&gt;
  
                      &lt;td&gt;
                          &lt;a [routerLink]="['/product/', productRow.id]" title="Editar este producto"
                              class="btn btn-sm btn-primary"&gt;
                              &lt;span class="fa fa-pencil"&gt;&lt;/span&gt;
                          &lt;/a&gt;
  
                          &lt;button title="Eliminar este producto"
                              (click)="deleteButtonClicked(productRow, confirmDeleteModalTemplate)"
                              class="btn btn-sm btn-danger"&gt;
                              &lt;span class="fa fa-trash"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/td&gt;
  
                      &lt;td&gt;{{productRow.sku}}&lt;/td&gt;
                      &lt;td&gt;{{productRow.name}}&lt;/td&gt;
                      &lt;td&gt;{{productRow.price}}&lt;/td&gt;
                  &lt;/tr&gt;
  
              &lt;/tbody&gt;
  
          &lt;/table&gt;
  
          &lt;ng-template #confirmDeleteModalTemplate&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title" id="confirmDeleteModalLabel"&gt;Confirmar eliminación de un producto&lt;/h5&gt;
                  &lt;button type="button" class="close" aria-label="Cerrar" (click)="modalRef.hide()"&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;Estas a punto de eliminar este producto:&lt;/p&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;p&gt;&lt;strong&gt;¡Ten en cuenta que esta acción no se puede deshacer!&lt;/strong&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary" (click)="modalRef.hide()"&gt;Cancelar&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Eliminar&lt;/button&gt;
              &lt;/div&gt;
          &lt;/ng-template&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I hope anyone can help me, I haven't found any solution, I try to get as close as possible as the demos on ngx-bootstrap doc, but... no way.</p>
  
  <p>Thanks in advance!!</p>