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>

Answer 1

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>