Ngx-bootstrap: Slow closing of the modal in relation to the original bootstrap

Created on 23 Mar 2020  路  5Comments  路  Source: valor-software/ngx-bootstrap

Is it possible to increase the fade in speed of the modal? speed is normal. but there is a certain slowness when closing. Just test the bootstrap and component modes. The opening is the same time. But closing the component is slower. This is bad when you are going to do very dynamic things.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 5.6.0

Angular: 9

Bootstrap: 4.3.1

comp(modal)

Most helpful comment

The reason for the slowness is the setTimeout call to do the actual hide: https://github.com/valor-software/ngx-bootstrap/blob/f6240fac0cbf2bfbe92be48eb61d3b35837517ba/src/modal/bs-modal.service.ts#L76

Notice that if you click the backdrop it closes the modal faster.

One way to quick fix this is to inject modalService: BsModalService and set config.animated to false to make setTimeout duration to 0.

constructor(
    public activeModal: BsModalRef,
    private modalService: BsModalService
  ) {}

  close() {
    this.modalService.config.animated = false;
    this.activeModal.hide();
  }

All 5 comments

I noticed this as well. You can also see it on the examples page (https://valor-software.com/ngx-bootstrap/#/modals).

The reason for the slowness is the setTimeout call to do the actual hide: https://github.com/valor-software/ngx-bootstrap/blob/f6240fac0cbf2bfbe92be48eb61d3b35837517ba/src/modal/bs-modal.service.ts#L76

Notice that if you click the backdrop it closes the modal faster.

One way to quick fix this is to inject modalService: BsModalService and set config.animated to false to make setTimeout duration to 0.

constructor(
    public activeModal: BsModalRef,
    private modalService: BsModalService
  ) {}

  close() {
    this.modalService.config.animated = false;
    this.activeModal.hide();
  }

The modal configuration is outside the component. Because I call the modal another component. So that way your solution doesn't work for me.

I call on app.component:

聽聽 openStatusServicos () {
聽聽聽聽 this.modalService.show (StatusServicosComponent, {backdrop: 'static', class: 'modal-lg modal-dialog-centered'});
聽聽 }

And within the modal component, I only use BsModalRef to close.

@rruffer in your StatusServicosComponent you can still inject BsModalService and set the config.animated = false in the close().

Unfortunately disabling animations is only a workaround. The timeout seems unnecessary even with animations disabled, because the timeout delay seems to happen even before the animation even starts running. Would it be possible to either reduce/remove the timeout delay, or allow configuring of the values?

Was this page helpful?
0 / 5 - 0 ratings