NgbModal error when trying to close
Solution 1
Please ignore, I fixed this. Was missing the following constructor off the bug-detail.component.ts
constructor(public activeModal: NgbActiveModal) {}
Solution 2
If anyone is having the same issue (i tried the solution by Code Ratchet, but ran into the same issue as Adrita Sharma).
const modalRef = this.modalService.open(BugDetailComponent);
I was able to use close
and dismiss
by using modalRef.close() in the template.
example:
<button type="button" class="btn btn-secondary" (click)="modalRef.close('Close click')">Close</button>
Related videos on Youtube
![Code Ratchet](https://i.stack.imgur.com/8wDuA.jpg?s=256&g=1)
Code Ratchet
Updated on June 19, 2022Comments
-
Code Ratchet about 2 years
I've successfully imtegrated the NgbModal into my Angular 2 application, I currently have another component being shown within the modal.
The issue I have is once it's appeared and I click close I get the following error message:
Cannot read property 'close' of undefined
Now I've been following Components as content I've looked at the HTML and also gone through the Typescript, however I'm unsure what I'm actually missing here.
This is my type script file:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { BugService } from '../service/bug.service'; import { Bug } from '../model/bug'; import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { BugDetailComponent } from '../../bug-detail/bug-detail.component'; @Component({ selector: 'bug-list', templateUrl: './bug-list.component.html', styleUrls: ['./bug-list.component.css'] }) export class BugListComponent implements OnInit { private bugs: Bug[] = []; constructor(private bugService: BugService, private cdRef: ChangeDetectorRef, private modalService: NgbModal) { } ngOnInit() { this.getAddedBugs(); } getAddedBugs() { this.bugService.getAddedBugs().subscribe(bug => { this.bugs.push(bug); this.cdRef.detectChanges(); }, err => { console.error("unable to get added bug - ", err); }); } open() { const modalRef = this.modalService.open(BugDetailComponent); modalRef.componentInstance.name = 'World'; } }
I import
BugDetailComponent
which I then reference inside theopen()
function. When I click close after the modal has appeared that's when I see the error message.My HTML is as follows:
<div class="modal-header" [id]="modalId"> <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title">Hi there!</h4> </div> <div class="modal-body"> <p>Hello, {{name}}!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button> </div>
Could someone please shed some light into why I receive this error and maybe help me fix it?
-
Adrita Sharma almost 7 yearsI am getting an error :
Error: No provider for NgbActiveModal!
Any help?? -
Ori Shalom about 6 yearsThis is just untrue
-
devjav over 4 yearsadd NgbActiveModal to providers in app.module.ts