Within my Angular application, I am utilizing the ngx-bootstrap modal component.
This modal is being used to provide observable callbacks when the modal is shown and hidden (onShown / onHidden) after a button click event.
The code snippet for this functionality is as follows:
import {Injectable, TemplateRef} from '@angular/core';
import {BsModalService} from 'ngx-bootstrap/modal';
import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Injectable()
export class MyService {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template ,{ class: ' modal-lg' } );
}
onModalShown(){
return this.modalService.onShown;
// I WANT TO RETURN this.modalService.onShown + modalRef
onModalHidden(){
return this.modalService.onHidden;
}
}
My main goal is to find out how to combine the onModalShown and onModalHidden methods in order to attach the reference to the modal modalRef at the same time as receiving the response from this.modalService.onShown.
I WOULD LIKE TO RETURN this.modalService.onShown + modalRef and then be able to subscribe to it within my component to retrieve both sets of data.
@Component()
export class MyComponent {
constructor( private myService : MyService) {}
whenCallbackFired(){
this.myService.onModalShown.subscribe(()=>{
HOW CAN I ACCESS BOTH SETS OF INFORMATION HERE??
})
}
}
It's important to mention that the modalRef is assigned after certain button clicks.
Any suggestions on how to achieve this?