Angular bootstrap: how to close 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>

Solution 1

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

Enjoy Happy codeing. Hopefully that helps!

Solution 2

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>

Solution 3

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();

Solution 4

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

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

 constructor(
    private modalService: NgbModal
  )

this.modalService.dismissAll();

Solution 5

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);

View more solutions