Ngx-bootstrap: How to get access to `BsModalRef` in opened modal component?

[AbhijitMuke]

I really appreciate ngx-bootstrap modal work before going to post my question.
I found one problem in following guide ngx-bootstrap-modal with service - http://valor-software.com/ngx-bootstrap/#/modals#service-nested

Having problem with this statement If you passed a component to .show() you can get access to opened modal by injecting BsModalRef.

export class ModalContentComponent {
public title: string;
public list: any[] = [];
constructor(public bsModalRef: BsModalRef) {} // How do you get access to bsModalRef here
}

I try running this example, but I never get bsModalRef in opened modal.

I also try passing bsModalRef through content, but it work with one modal and failed to work with nested modal.

Is there any other way to pass bsModalRef in ModalContentComponent ?

[IlyaSurmay]

Hi! Didn't exactly get what's the issue here. There's no need to pass bsModalRef to ModalContentComponent, you only need to inject it in its constructor.
Check this out - https://plnkr.co/edit/tyDezs2LswVHyU2l9fwp?p=preview

[AbhijitMuke]

@IlyaSurmay Thanks for reply.
In my case I'm writing ModalContentComponent in anther file. I can get bsModalRef when I use both of component in same file but failed when using different files for AppComponent & ModalContentComponent .

So basically, I need bsModalRef in ModalContentComponent which is in another file.

[AbhijitMuke]

Gotcha.

I was using import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class'; as per http://valor-software.com/ngx-bootstrap/#/modals#service-nested

But I found import { BsModalRef } from 'ngx-bootstrap'; in your plunker.

Now, I can access to bsModalRef anywhere regardless of my ModalContentComponent location.

Thanks a lot.

[nalvadesharayu29]

instead of

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

you can write directly
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

the thing to solve this you need to do is in your app.module.ts

import { ModalModule, BsModalRef } from 'ngx-bootstrap/modal';

     imports: [
        ModalModule.forRoot()
   ],
     providers: [
        BsModalRef
   ],

I hope this will Help You.

Because it worked for me.

[JosVermoesen]

thanks a lot!
i forgot BsModalRef in providers