I have 2 ng-Template and first modal is opening the other one. When I hide the top modal it hides the below one also and only leaves black background and app is unusable, i have to manually refresh the browser. This was working fine before we upgraded to angular 7 to 10.
import { BsModalService , BsModalRef} from 'ngx-bootstrap/modal';
closeTestPopup1()
{
this.modalRef.hide();
}
openpopup2(template)
{
this.modalRef2 = this.modalService.show(template, { class: 'mrk-def-modal approve-task-modal modal-dialog-centered' });
}
closeTestPopup2()
{
this.modalRef2.hide();
}
<ng-template #TestPopup1>
<div class="btn-row mt-3 d-none d-md-flex">
<button i18n matRipple class="btn btn-secondary btn-sm ml-auto" type="button" (click)="closeTestPopup1()">
Cancel
</button>
<button i18n matRipple class="btn btn-primary btn-sm ml-2 set-s-bg-color" (click)="openpopup2(TestPopup2)"
>
Save
</button>
</div>
</ng-template>
<ng-template #TestPopup2>
<div class="btn-row mt-3 d-none d-md-flex">
<button i18n matRipple class="btn btn-secondary btn-sm ml-auto" type="button" (click)="closeTestPopup2()">
Cancel popup 2
</button>
<button i18n matRipple class="btn btn-primary btn-sm ml-2 set-s-bg-color" type="submit"
>
Save
</button>
</div>
</ng-template>