Question:

How can I close a bootstrap modal using Angular?

Problem

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>

</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

//or

Remember, Angular creates a directory, in this directory there are the index.html and a copy of your assets folder. It's from this folder where Angular looks for the "images.”

>Narrow SomeType vs SomeType[]

>Create a function that convert a dynamic Json to a formula in Typescript

>How to destroy a custom object within the use Effect hook in TypeScript?

>How to type the values of an object into a spreadsheet in TypeScript?

>Type key of record in a self-referential manner in TypeScript?

>How to get the last cell with data for a given column in TypeScript?

>Ignore requests by interceptors based on request content in TypeScript?

>Create data with Typescript Sequelize model without passing in an id?

>How to delete duplicate names from Array in Typescript?