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">×</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>
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">×</span>
</button>
</div>
<div class="modal-body">
I am a child modal, opened from parent component!
</div>
</div>