BsModalService.getModalsCount() is not accurate when implement a nesting modal

[miazocool]

Bug description:

I implement a nested modal, and the getModalCount is not accurate.

The code can be found at ngx-bootstrap documentation at nested modal

https://valor-software.com/ngx-bootstrap/#/components/modals?tab=overview

I tweaked the code a bit to show console.log

HTML Component

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open first modal</button>
 
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">First modal</h4>
    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
      <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a first modal<br />
    <button type="button" class="btn btn-primary" (click)="openModal2(templateNested)">Open second modal</button>
    <button type="button" class="btn btn-primary" (click)="closeModal(1)">Close self</button>
    <button type="button" class="btn btn-primary" (click)="closeModal()">Close all modal</button>
  </div>
</ng-template>
 
<ng-template #templateNested>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Second modal</h4>
    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef2?.hide()">
      <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is nested modal.<br />
    <button *ngIf="modalRef" type="button" class="btn btn-danger" (click)="closeFirstModal()">Close first modal</button>
    <button type="button" class="btn btn-danger" (click)="closeModal(2)">Close self</button>
    <button type="button" class="btn btn-danger" (click)="closeModal()">Close all modal</button>
  </div>
</ng-template>

TS compoenent

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'nested-modal',
  templateUrl: './nested-modal.component.html',
  standalone: true,
  imports: [CommonModule],
})
export class NestedModalComponent {
  modalRef?: BsModalRef | null;
  modalRef2?: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<void>) {
    console.log(
      'modalCount before open modal',
      this.modalService.getModalsCount()
    );
    this.modalRef = this.modalService.show(template, {
      id: 1,
      class: 'modal-lg',
    });
    console.log(
      'modalCount after open modal',
      this.modalService.getModalsCount()
    );
  }
  openModal2(template: TemplateRef<void>) {
    console.log(
      'modalCount before open modal 2',
      this.modalService.getModalsCount()
    );
    this.modalRef2 = this.modalService.show(template, {
      id: 2,
      class: 'second',
    });
    console.log(
      'modalCount after open modal 2',
      this.modalService.getModalsCount()
    );
  }
  closeFirstModal() {
    if (!this.modalRef) {
      return;
    }

    this.modalRef.hide();
    this.modalRef = null;
  }
  closeModal(modalId?: number) {
    console.log('modalCount before hide', this.modalService.getModalsCount());
    this.modalService.hide(modalId);
    console.log('modalCount after hide', this.modalService.getModalsCount());
  }
}

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: "^18.0.2"

Angular: "^18.2.0"

Bootstrap: 5.2.3

Build system: Angular CLI, System.js, webpack, starter seed:

Expected behavior

When both modals are open, the getModalsCount is accurate, but when i close the modal one by one, the modal counts is inaccurate

When second modal is closed at here

  closeModal(modalId?: number) {
    console.log('modalCount before hide', this.modalService.getModalsCount());
    this.modalService.hide(modalId);
    console.log('modalCount after hide', this.modalService.getModalsCount());
  }

The output will be

modalCount before hide 2 modalCount after hide 1

Which is correct, because before hide() there are two modals, and after hide one modal, the modal count will be 1

But when i close the first modal, the output is below

modalCount before hide 0 modalCount after hide 0

Which is incorrect, because before hide, there should be one open modal.

I think there's a bug in getModalsCount(), hope someone can help me

[ladislavskufca]

Hello,

I can confirm, we are facing the same issue, as you already mentioned, visible on demo page under nested modals example.

[lexasq]

@miazocool @ladislavskufca This is fixed withe latest release please confirm.

[ladislavskufca]

@miazocool @ladislavskufca This is fixed withe latest release please confirm.

Confirming, works good, thanks! 👌