ng-bootstrap modal not closing on cross click
11,229
Solution 1
After some research and making these changes, it worked.
<ng-template #filterForm let-d="dismiss">
<div class="TitlePanel">
Configure Columns
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
X
</button>
</div>
<div class="modal-body">
Body
</div>
</ng-template>
Solution 2
(click)="modal.dismiss('Cross click')"
needs to be changed to
(click)="activeModal.dismiss('Cross click')"
because you are giving
public activeModal: NgbActiveModal
Solution 3
You are using modal
but you are injecting activeModal
. Update the html code to this:
<ng-template #filterForm let-modal>
<div class="TitlePanel">
Configure Columns
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
X
</button>
</div>
<div class="modal-body">
Body
</div>
</ng-template>
Comments
-
Sagar Raj almost 2 years
i'm using the ng-bootstrap modal popup, and it's not closing on click of the cross button.
This is the
<a>
tag that triggers the popup -<div class="actions padding-zero"> <a href="javascript:void(0);" (click)="openFilter()" class="icon configure-columns-icon"> <span class="control-label">Configure Columns</span> </a> </div>
Modal -
<ng-template #filterForm let-modal> <div class="TitlePanel"> Configure Columns <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> X </button> </div> <div class="modal-body"> Body </div> </ng-template>
component.ts file -
export class NgbdModalContent { @Input() name; constructor(public activeModal: NgbActiveModal) { } } @Component({ selector: 'app-modals', templateUrl: './modals.component.html', styleUrls: ['./modals.component.scss'], encapsulation: ViewEncapsulation.None, }) export class ModalsComponent { closeResult: string; constructor(private modalService: NgbModal) { } // Open default modal open(content) { this.modalService.open(content).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } // This function is used in open private getDismissReason(reason: any): string { if (reason === ModalDismissReasons.ESC) { return 'by pressing ESC'; } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { return 'by clicking on a backdrop'; } else { return `with: ${reason}`; } } // Open modal with dark section openModal(customContent) { this.modalService.open(customContent, { windowClass: 'dark-modal' }); } // Open content with dark section openContent() { const modalRef = this.modalService.open(NgbdModalContent); modalRef.componentInstance.name = 'World'; } }
Also, I'm getting this error in the console when i click the close button - "Cannot read property 'dismiss' of undefined"
-
Gobli over 5 yearsI have updated my answer, I hope it's more clear now. You should use the same variable name. So change "modal.dismiss" to "activeModal.dismiss"
-
Sagar Raj over 5 yearsStill no luck. I'm getting the same "Cannot read property 'dismiss' of undefined" error in the console.
-
Sagar Raj over 5 yearsStill no luck. I'm getting the same "Cannot read property 'dismiss' of undefined" error in the console.