How to close an Angular Bootstrap modal

Question

I´m working with Angular 4, Firebase and Angular Bootstrap. I open the modal, which is a user form, and the idea is to close the modal as soon as the user logs in using one of the methods to login (google auth, Facebook auth or email and password auth). But I can't find a way to close the modal when needed.

google auth

    export class NavComponent implements OnInit {

          @ViewChild('close') public modal: ElementRef;
    
          constructor() {}
    
    
          public openModal(content) {
            this.modalService.open(content).result.then((result) => {
              this.closeResult = `Closed with: ${result}`;
            }, (reason) => {
              this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
            });
          }    
          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}`;
            }
          }
         public googleLogin(content): void {
           this.auth.googleAuth().then((res: any) => {
              // close the modal in this moment.
              this.modal.nativeElement.click();
              const user = res.user;
              this.router.navigate(['/gallery']);
            });
         }}

Modal html

<ng-template #login let-c="close" let-d="dismiss" class="modal-dialog">
  <button #close type="button" class="close" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
  <div class="modal-body">
    <ngb-tabset>
      <ngb-tab title="Couple">
        <ng-template ngbTabContent>
          <div class="modal-header">
            <h4 class="modal-title">Couple</h4>
          </div>
          <form [formGroup]="loginForm" (ngSubmit)="userlogin(user)" novalidate>
            <div id="couple_login_form" class="login-form">
              <div class="login-field" [ngClass]="{'pattern' : loginForm.controls.email.invalid && loginForm.controls.email.dirty, 'error' : loginForm.controls.email.pristine && loginForm.controls.email.touched, 'focus' : loginForm.controls.email.dirty}">
                <label for="email_login">E-Mail</label>
                <input type="email" formControlName="email" [(ngModel)]="user.email" name="email">
                <div class="message text-center">
                  <p>This field is required</p>
                </div>
                <div class="pattern text-center">
                  <p>Enter a valid email.</p>
                </div>
              </div>
              <div class="login-field" [ngClass]="{'error' : loginForm.controls.password.pristine && loginForm.controls.password.touched, 'focus' : loginForm.controls.password.dirty}">
                <label for="pass_login">Password</label>
                <input type="password" [(ngModel)]="user.password" name="password" formControlName="password">
                <div class="message text-center">
                  <p>This field is required</p>
                </div>
              </div>
              <p class="text-center bottom-msg-login">Don't have an account yet? Download the app für Android or iOS, <br>sign in and create your wedding!</p>
              <button class="submit" type="submit" name="couple" [disabled]="!loginForm.valid">Login</button>
            </div>
          </form>
          <div class="wrapper-social-login">
            <div id="google_login" (click)="googleLogin(login)"></div>
            <div id="facebook_login" (click)="facebookLogin()"></div>
          </div>
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Guests">
        <ng-template ngbTabContent>
          <div class="modal-header">
            <h4 class="modal-title">Guest</h4>
          </div>
          <div id="guest_login_form" class="login-form">
            <div class="login-field">
              <label for="email_login">Name</label>
              <input type="text" name="login_name" id="login_name">
              <div class="message text-center">
                <p>This field is required</p>
              </div>
            </div>
            <div class="login-field">
              <label for="pass_login">Wedding Code</label>
              <input type="password" name="login_code" id="login_code">
              <div class="message text-center">
                <p>This field is required</p>
              </div>
              <div class="pattern text-center">
                <p>Enter a valid code.</p>
              </div>
            </div>
            <p class="text-center bottom-msg-login">Also getting married?Take a look at our packages and create <br> your own wedding within the app!</p>
            <button class="submit" id="guest_login_btn" type="button" name="guest">Login</button>
          </div>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  </div>
</ng-template>

mickaelw · Answer 1 · 2017-11-23T16:32:42.770

12

You can use ViewChild :

In your ts:

@ViewChild('closeModal') closeModal: ElementRef


@Component({
  ...
})
export class NameComponent extends TicketActionsModal {

  @ViewChild('closeModal') closeModal: ElementRef

  ...

}

When you need to close the modal you call: this.closeModal.nativeElement.click()

For example:

public googleLogin(content): void {
   this.auth.googleAuth().then((res: any) => {
      // close the modal in this moment.
      this.closeModal.nativeElement.click() //<-- here
      const user = res.user;
      this.router.navigate(['/gallery']);
   });
}

In your html, add #closeModal to the button:

<button #closeModal type="button" class="close" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
</button>

edited Nov 23 '17 at 16:32

answered Nov 23 '17 at 16:19

mickaelw

1,453
2
11
28

i have the error `Uncaught (in promise): TypeError: _this.modal.nativeElement is undefined` – Miguel Frias Nov 23 '17 at 16:29
modal is a viewchild in the component? – mickaelw Nov 23 '17 at 16:31
yes of course i just change the name of `closeModal` for `modal` – Miguel Frias Nov 23 '17 at 16:32
can you modify your question with your code? That's work for me – mickaelw Nov 23 '17 at 16:33
On the button in your html maybe you have forget to add #login in your case. You can check into my answer – mickaelw Nov 23 '17 at 16:41
Not on the ng-template :) – mickaelw Nov 23 '17 at 16:44
ok i make the change but still getting the same error, and if i remove the `#login` from the ng-template the modal doesn´t open, i gonna edit the code for you to see how is now – Miguel Frias Nov 23 '17 at 16:48
now what i did was to put `#close ` to the button and get on the `@viewChild('close')` and leave the ng-template with the `#login` but i still gettin the same error `Uncaught (in promise): TypeError: _this.modal.nativeElement is undefined` – Miguel Frias Nov 23 '17 at 16:49
what's your bootstrap's version? In the latest documentation 4.0 ng-template isn't use – mickaelw Nov 23 '17 at 17:35
i´m using the `ng-bootstrap` from [Angular Bootstrap](https://ng-bootstrap.github.io/#/home) the last version is the 1.0.0 Beta, but im gonna change to the `ngx-bootstrap` to see if i can do it in a easier way – Miguel Frias Nov 24 '17 at 08:19
Can you do a gist with your .ts and .html? – mickaelw Nov 24 '17 at 08:47
Guy Thanks so much for the help but it was much easy and fast for my just change the bootstrap module to ngx-bootstrap in this case. – Miguel Frias Nov 24 '17 at 09:48
1

In angular 8 you have to pass two parameter @ViewChild('closeModal',{static: false}) closeModal: ElementRef; – abhishek kumar May 28 '20 at 08:23

score 11 · Answer 2 · answered Mar 25 '20 at 15:13

A simple method is to hide buttons

  <button id="openModalButton" [hidden]="true" data-toggle="modal" data- 
   target="#myModal">Open Modal</button>
  <button id="closeModalButton" [hidden]="true" data-toggle="modal"        
   data-target="#myModal" class="btn btn-default"                          
  data-dismiss="modal">Close</button>

myModal should be the id name of the modal. To open the modal

document.getElementById("openModalButton").click();

To close the modal

document.getElementById("closeModalButton").click();

score 5 · Accepted Answer · edited Jul 22 '23 at 00:11

Follow this step

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'demo-modal-child',
  templateUrl: './child.html'
})
export class DemoModalChildComponent {
@ViewChild('childModal') public childModal:ModalDirective;

public showChildModal():void {
  this.childModal.show();
}

public hideChildModal():void {
  this.childModal.hide();
 }
}

    <button type="button" class="btn btn-primary" (click)="showChildModal()">Open child modal</button>
    <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title pull-left">Child modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    I am a child modal, opened from parent component!
  </div>
</div>

ngx-bootstrap link here

In this case i check as answer even if is no really the answer because i was using another bootstrap module call `ng-bootstrap` from [Angular Bootstraop](https://ng-bootstrap.github.io/#/home) but changing to the ngx-bootstrap, fixed the problem so thanks any way. — Miguel Frias, Nov 24 '17 at 09:50

score 3 · Answer 4 · answered Mar 03 '21 at 07:55

3

use NgbModal class method "dismissall()" to close the modal

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

 constructor(
    private modalService: NgbModal
  )

this.modalService.dismissAll();

answered Mar 03 '21 at 07:55

Bhupendra

146
2
5

score 2 · Answer 5 · answered May 12 '20 at 19:46

2

Give an ID to button (Modal close cutton)

let elem = document.getElementById('submitBtn');

let evt = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });

elem.dispatchEvent(evt);

answered May 12 '20 at 19:46

Srikrushna

4,366
2
39
46

score 1 · Answer 6 · answered Sep 14 '22 at 14:19

1

Give your close button an ID

<button id="ModalClose" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

Then in your Typescript, you can use plain old JS

document.getElementById("ModalClose")?.click();

answered Sep 14 '22 at 14:19

David Lindon

305
2
8

score 0 · Answer 7 · answered Oct 25 '22 at 13:27

You can use (click)="modal.close('Done')" for the button.

For example:

In your HTML:

<ng-template #removeModal let-modal>
<div class="modal-header bg-primary">
    <h6 class="modal-title text-light" 
        id="deleteModalCenterTitle">
        Delete
    </h6>
</div>
<div class="modal-body mx-3">
    Are you sure?
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal"
        (click)="doDelete()">
        Delete
    </button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal"
        (click)="modal.close('Done click')">
        Cancel
    </button>
</div></ng-template>

In your component:

Start your modal with: this.modalService.open(this.removeModal, { centered: true });

How to close an Angular Bootstrap modal

7 Answers7