Angular Bootstrap how can I close the modal?

Question

I open my modal with this

(click)="openVerticallyCentered(content)"

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

  openVerticallyCentered(content) {
    this.modalService.open(content);
  }

login(){

        this.authService.signinUser(this.userLogin.email, this.userLogin.password).then(response => {
            console.log(response);
            this.toastr.success('Login Success .!!');
            this.activeModal.close();  // <-- calling .close() method when user login successfully but its not close 
        })

}

Which is working fine. But I need to close it by button. It's closing from html like this (click)="modal.dismiss('Cross click')" But I need to close it from .ts file.

I try with this.modalService.close(); But it says close is not a type of modelService. Any solution ?

Does this answer your question? [How to programmatically close ng-bootstrap modal?](https://stackoverflow.com/questions/40382319/how-to-programmatically-close-ng-bootstrap-modal) — maury844, Feb 03 '20 at 13:21

score 0 · Answer 1 · answered Feb 03 '20 at 13:24

0

You could find an example here https://stackblitz.com/edit/angular-modal-service?file=app%2Fmy-modal.component.ts

answered Feb 03 '20 at 13:24

beanic

539
6
22

Maxime Lafarie · Answer 2 · 2020-02-03T15:57:56.827

0

Duplicate of How to programmatically close ng-bootstrap modal?

Quick answer: You need to retrieve the modal instance then call the close() method on active modal (or any targeted modal) in the constructor by calling NgbActiveModal.

Example:

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

export class LessonModalComponent {
...
  constructor(public activeModal: NgbActiveModal) { }

  closeCustom() {
    console.log('close active modal');
    this.activeModal.close();  // <-- calling .close() method
  }
}

Here's a working example (check the "Close custom" button in any modal)

edited Feb 03 '20 at 15:57

answered Feb 03 '20 at 13:24

Maxime Lafarie

2,172
1
22
41

Thanks but dont know why its not working. Its closing by button. But not from function I need to do when user login in app . – UmaiZ Feb 03 '20 at 15:14
Are you importing `NgbActiveModal` in your constructor like this: `constructor(public activeModal: NgbActiveModal) { }` as in my example? – Maxime Lafarie Feb 03 '20 at 15:22
can you please provide an example on Stackblitz please? It's hard to help you without a similar-case reproduction. – Maxime Lafarie Feb 03 '20 at 15:57

Angular Bootstrap how can I close the modal?

2 Answers2