Как закрыть модальный режим после успешного входа в Google, Facebook и локальный, иначе вы увидите ошибку в модальном режиме.

Question

Я пытаюсь закрыть модальное окно после успешного входа в Google, Facebook или локально. Вход в систему работал, как и ожидалось ранее, когда у меня была отдельная страница для формы входа в систему, и после успешного входа она перенаправляет на домашнюю страницу с зарегистрированным именем пользователя. Но потом я почувствовал, что модальное отображение более современно и, следовательно, реализовал модальный вход в систему с использованием Bootstrap 4

Функциональность входа работает прекрасно, но, поскольку модальное окно не закрывается после успешного входа, только после того, как я закрою его вручную и обновлю фон, пользователю будет показан вход. Я понятия не имею, как это сделать, так как я новичок в Bootstrap и все еще новичок в угловой.

<!-- Login Modal -->
    <div class="modal fade" id="LoginModal" *ngIf="showModal" tabindex="-1" role="dialog" aria-labelledby="LoginModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="LoginModalLabel">
                        <strong>Log In</strong>
                    </h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form #loginForm="ngForm" (ngSubmit)="loginForm.form.valid && onLoginFormSubmit(loginForm)" style="height:541px;" novalidate>
                        <button type="button" (click)="fbSignIn()" data-dismiss="LoginModal" class="btn btn-default btn-outline-primary  mb-0 mr-4 ml-4">Log in With Facebook</button>
                        <button type="button" (click)="googleSignIn()" class="btn btn-default btn-outline-danger  mb-0 mr-4 ml-4 ">Log in With Google</button>
                        <hr>
                        <small>
                            <div *ngIf="error" class="alert alert-danger">{{error}}</div>
                        </small>
                        <div class="form-group">
                            <input class="form-control" type="email" name="email" [(ngModel)]="model.email" #email="ngModel" placeholder="Enter Email"
                                ngModel required pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$">
                            <small [hidden]="email.valid || (email.pristine && !loginForm.submitted)" class="text-danger">
                                Email is required and format should be
                                <i>[e-mail]</i>.
                            </small>
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="password" name="password" [(ngModel)]="model.password" #password="ngModel" placeholder="Password"
                                ngModel required>
                            <small [hidden]="password.valid || (password.pristine && !loginForm.submitted)" class="text-danger">
                                Password is required
                            </small>
                        </div>

                        <div class="form-group">
                            <button class="btn btn-lg btn-success btn-block"  type="submit" [disabled]="loading">Log In</button>
                            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
                            />
                        </div>


                    </form>

                </div>
                <div class="modal-footer">
                    <a href="#" class="forgot" style="height:50px;">Forgot your email or password?</a>

                </div>
            </div>
        </div>
    </div>

Я добавил следующее в Login.Component.ts под OnInit-

@Input ('show-modal') showModal: логическое значение; this.showModal = false;

showModal = true; в разделе заголовка модал, который содержит модал. Но не повезло.

Когда я нажимаю в Google, войдите на модал

Когда пользователь успешно вошел в систему