CODEWITHSUNDEEP
angularngx-bootstrapngx-bootstrap-modal
user3653474
user3653474

Reputation: 3854

Execute code after modal popup fully loaded in angular

I'm using ngx-bootstrap/modal

import { BsModalRef, BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
   
constructor(private modalService: BsModalService) {}
    
this.modalService.show(this.Content, { ariaLabelledBy: 'modal-basic-title', keyboard: false, backdrop: 'static', }).result.then((result: LinkDetail) => {

Here i'm getting

Property 'result' does not exist on type 'BsModalRef'

any solution to fix this issue because i want to execute some lines of code after modal is fully loaded

thanks

Upvotes: 1

Views: 90

Answers (2)

Alex Umanskiy
Alex Umanskiy

Reputation: 46

I believe is this is what you are looking for. You could use (onShown) hook to do something in your code.

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

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

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 57721

I think the open is synchronous and there is no need to wait for any promise. I checked the source code for show method.

You can simply put the logic inside a setTimeout, which will happen after the modal opens.

import { BsModalRef, BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
   
constructor(private modalService: BsModalService) {}
    
this.modalService.show(this.Content, { ariaLabelledBy: 'modal-basic-title', keyboard: false, backdrop: 'static', });

setTimeout(() => {
    // write your logic here!
});

Upvotes: 1

Related Questions