Issue
I have a bootstrap 5 modal that I am trying to close from typescript. When I call the function to close it. I get an error that saying undfined when the dismiss function is called.
import {NgbModal, ModalDismissReasons,NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { ModalSizes } from 'src/app/core/utilities/modal-sizes';
import { timer } from 'rxjs';
declare var window: any;
export class UploadComponent {
@ViewChild("spinnerLoaderModal") content;
loading = false;
spinnerDuration = 2000;
closeResult: string;
//modalReference: NgbModalRef;
modalReference: NgbModalRef;
constructor(
private cdRef: ChangeDetectorRef,
private modalService: NgbModal,){}
//this.modalService.open(this.content, ModalSizes.lg);
open(content){
this.modalReference = this.modalService.open(content);
this.modalReference.result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed `;
});
//this.modalReference.close();
}
public closeSpinnerModal()
{
this.modalReference.dismiss();
}
public onSubmit(event : MouseEvent) {
this.isLoading = true;
this.open(this.content)
timer(this.spinnerDuration).subscribe(this.closeSpinnerModal)
}
}
HTML
<ng-template #spinnerLoaderModal let-c="close" let-d="dismiss">
<div class="modal-body">
<div class="row">
<input type="hidden" id="spinLoader" class="form-control">
</div>
<img src="../../../../assets/images/loaderBlue.gif" id="bg" alt="" style="width:30%; margin-left: 0; margin-right: 0;">
</div>
</ng-template>
Solution
You need use "flat arrow" in subscribe so, the scope will be the component
timer(1000).subscribe(()=>this.closeSpinnerModal())
NOTE1:there's no "let-d dismiss",
Inside the template you use
d.close('what ever') //to close and fall into "then(result)"
d.dismiss('what ever other') //to close and fall into the (reason)
NOTE2: use
<img src="./assets/images/loaderBlue.gif">
//or
<img src="assets/images/loaderBlue.gif">
Rememeber, Angular create a directory, in this directory there are the index.html and a copy of your assets folder. It's form this folder where Angular look for the "images"
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.