ngx-bootstrap Bootstrap4: after closing modal is still there

Question

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.

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.

There's the code:

Component: product-list.component.ts

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<Product> = [];

    public modalRef: BsModalRef;

    constructor(
        private productService: ProductService,
        private modalService: BsModalService) {
    }

    ngOnInit() {

        this.productService.loadProductList().then(
            serverProducts => this.loadedProducts = serverProducts);

    }

    deleteButtonClicked(product2BeDeleted: Product,
        confirmDeleteModalTemplate: TemplateRef<any>): void {

        if (config.showConfirmDeleteModal) {
            this.modalRef = this.modalService.show(confirmDeleteModalTemplate);
        }

    }

}

Component template: product-list.component.html

<div class="card">
    <div class="card-block">

        <h4 class="card-title">Listado de productos</h4>

        <div *ngIf="loadedProducts.length == 0" class="alert alert-warning" role="alert">
            <span class="fa fa-warning"></span> No hay productos disponibles
        </div>

        <table *ngIf="loadedProducts.length > 0" class="table table-striped">

            <thead class="thead-inverse">
                <tr>
                    <th></th>
                    <th>SKU</th>
                    <th>Nombre</th>
                    <th>Precio</th>
                </tr>
            </thead>

            <tbody>

                <tr *ngFor="let productRow of loadedProducts">

                    <td>
                        <a [routerLink]="['/product/', productRow.id]" title="Editar este producto"
                            class="btn btn-sm btn-primary">
                            <span class="fa fa-pencil"></span>
                        </a>

                        <button title="Eliminar este producto"
                            (click)="deleteButtonClicked(productRow, confirmDeleteModalTemplate)"
                            class="btn btn-sm btn-danger">
                            <span class="fa fa-trash"></span>
                        </button>
                    </td>

                    <td>{{productRow.sku}}</td>
                    <td>{{productRow.name}}</td>
                    <td>{{productRow.price}}</td>
                </tr>

            </tbody>

        </table>

        <ng-template #confirmDeleteModalTemplate>
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteModalLabel">Confirmar eliminación de un producto</h5>
                <button type="button" class="close" aria-label="Cerrar" (click)="modalRef.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <p>Estas a punto de eliminar este producto:</p>
                    <ul>
                        <li></li>
                    </ul>
                <p><strong>¡Ten en cuenta que esta acción no se puede deshacer!</strong></p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" (click)="modalRef.hide()">Cancelar</button>
                <button type="button" class="btn btn-primary">Eliminar</button>
            </div>
        </ng-template>

    </div>
</div>

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.

Thanks in advance!!

Answer 1

I ran into this same issue yesterday. The solution for me was to remove the BSModalService from the providers list in the component. When you add the service to the providers list the component will get its own instance of the service instead of the singleton instance created in the Modal module. This is what causes the strange behavior of the backdrop not going away.