CODEWITHSUNDEEP
angularbootstrap-modalng-bootstrap
Code Ratchet
Code Ratchet

Reputation: 6029

NgbModal error when trying to close

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 the open() 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">&times;</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?

Upvotes: 6

Views: 13765

Answers (6)

Mohamed Imran
Mohamed Imran

Reputation: 179

Better You give a method and close it in your .ts page

<button type="button" class="btn btn-secondary" (click)="closeModal()">Close</button>

and in your .ts file

 closeModal(){this.modalService.dismissAll();}

Upvotes: 0

Rahali Hicham
Rahali Hicham

Reputation: 11

you can add in your file app.module.ts : the providers: [ NgbActiveModal ],

Upvotes: 0

dev verma
dev verma

Reputation: 777

Add NgbActiveModal in providers[NgbActiveModal] of your module.it will avaiable in all your component of your module then declare its variable in constructor function of your componet like constructor(private ngvActiveModal: NgbActiveModal);

Upvotes: -1

dream88
dream88

Reputation: 511

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>

Upvotes: 2

paragonid
paragonid

Reputation: 261

You can run into same error in case import "NgbModal" is missing in line

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

Upvotes: -2

Code Ratchet
Code Ratchet

Reputation: 6029

Please ignore, I fixed this. Was missing the following constructor off the bug-detail.component.ts

constructor(public activeModal: NgbActiveModal) {}

Upvotes: 3

Related Questions