Angular 2 ng-bootstrap close Modal

Question

I am trying to close the modal that was presented to me through the open(content) function as shown in the example in the Documentation of ng-boostrap. In the website, it mentioned that i can call close or dismiss from NgbActiveModal.

So I included NgbActiveModal in the component and tried to call dismiss() or close(). Both of them doesn't work. First of all, dismiss() is undefined (Am I importing NgbActiveModal wrong?) When I call close(), it seems to want to call some weird function inside lib.dom.d.ts which is not what I want at all. So to me it seems like I have no access to the close and dismiss provided by ng-bootstrap even after I imported NgbActiveModal. Note that I can show the modal fine

In the example, the modal was closed via (click)="c('Close click')". I have no idea where that comes from.

So... How can I call the close() or dismiss() (Whichever works) to get rid of the modal

Community · Accepted Answer · 2017-05-23 12:02:06Z

35

Answer can be found here. ng-bootstrap website is missing lots of information unfortunately Cannot close ng-bootstrap Modal

Inside the component class

 private modalRef: NgbModalRef; // Modal open(content) { this.modalRef = this.modalService.open(content); this.modalRef.result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } onSave() { this.modalRef.close(); }

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Jan 30, 2017 at 14:18

user172902

3,60110 gold badges36 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Devner Over a year ago

Thanks for sharing the link. Even after visiting that, it is still not clear how to close() or dismiss() to get rid of the modal. I would appreciate it if you could please share how you solved it. Thanks.

user172902 Over a year ago

Updated with solution.

teddybear Over a year ago

How would you do this if content was an entryComponent?

Stephen R. Smith Over a year ago

@user172902 You should mark this as the correct / accepted answer, as this is the correct way to do this and it's very difficult information to filter out from the noise.

Shahar Over a year ago

@teddybear you can use the value returned from this.modalService.open(content) (which is a modalRef) as in the answer. Another option is to pass the modalRef to the entryComponent.

Yoav Schniederman · Accepted Answer · 2017-01-30 14:10:51Z

At your modal component you need to add the line :

@ViewChild('exampleModal') public exampleModal:ModalDirective;

At html modal you need to insert in the div root :
```
#exampleModal="bs-modal" 
```
At your modal component :
```
onSave(){ this.exampleModal.hide(); } 
```

Also import the ModelDirective in the component as import { ModalDirective } from 'ngx-bootstrap';

Jorge Casariego · Accepted Answer · 2018-11-06 14:10:27Z

I followed the doc from ng-bootstrap with Angular 6. Finally I found the solution changing one line from the original example:

modal-options.html

<ng-template #content let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>One fine body&hellip;</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-light" (click)="d('Close click')">Close</button> </div> </ng-template>

I changed from this let-modal to this let-d="dismiss" and also this 2 lines:

(click)="d('Cross click')"
(click)="d('Close click')"

modal-options.ts

constructor(private modalService: NgbModal) {} openLg(content) { this.modalService.open(content, { size: 'lg' }); }

Collectives™ on Stack Overflow

Angular 2 ng-bootstrap close Modal

3 Answers 3

5 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Linked

Related