My issue is that when I try to close a modal by pressing the X button, it doesn't work. Here is the button where I am triggering the modal:
<button type="submit" id="submit-form" class="btn btn-primary" (click)="openConfirmModal()">Restaurar</button>
In this case, the method openConfirmModal() is being called from my current component, which in turn triggers the modal from another service component called password-reset.service.ts:
import { PasswordResetService } from './password-reset.service';
export class PasswordResetComponent implements OnInit {
modalRef: BsModalRef;
constructor(private modalService: BsModalService,
private passwordResetService: PasswordResetService) { }
openConfirmModal() {
this.passwordResetService.confirmar("HECHO", "Datos verificados! Por favor, revise su bandeja de entrada...").subscribe((answer) => {});
}
This is the content of my password-service.ts:
import { ConfirmModalComponent } from './modals/confirm-modal/confirm-modal.component';
export class PasswordResetService {
bsModalRef: BsModalRef;
constructor(private bsModalService: BsModalService) { }
public confirmar(title: string, message: string) : Observable<string> {
const initialState = {
title,
message,
};
this.bsModalRef = this.bsModalService.show(ConfirmModalComponent, { initialState });
return new Observable<string>(this.getModalSubscriber());
}
private getModalSubscriber() {
return (observer) => {
const subscription = this.bsModalService.onHidden.subscribe((reason: string) => {
observer.complete()
});
return {
unsubscribe() {
subscription.unsubscribe();
}
}
}
}
}
Finally, this is the component that contains the modal and where I am attempting to trigger it:
confirm-modal.component.html:
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="onClose()">
<span aria-hidden="true"&>x</span>
</button>
</div>
<div class="modal-body">
<div class="message-margin">
<p>{{message}}</p>
</div>
</div>
confirm-modal.component:
export class ConfirmModalComponent implements OnInit {
title: string;
message: string;
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {
}
ngOnInit() {
}
onClose() {
this.modalRef.hide();
}
}
If anyone could assist me with this issue, I would greatly appreciate it. Thank you!