Material Dialog does not close

Question

I have a material initiated by the navigation component if it matters, but the issue is I'm doing a login with the dialog and it does not seem to close when the login is successful and user is redirected to dashboard.html

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import { AngularFireAuth } from "@angular/fire/auth";
import { AuthService } from "../../core/services/auth.service";
import { User, PrivateUser } from "../../core/models/user";
import { UserService } from "../../core/services/user.service";
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { SignUpComponent } from '../../components/authentication/sign-up/sign-up.component';
import { SignInComponent } from '../../components/authentication/sign-in/sign-in.component';


@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  isLoggedIn$: Observable<boolean>;
  isLoggedOut$: Observable<boolean>;
  user$: Observable<any>;

  constructor(
    public afAuth: AngularFireAuth,
    private authService: AuthService,
    private userService: UserService,
    public dialog: MatDialog,
    public dialogRef: MatDialogRef<SignInComponent>
    ) { }

  ngOnInit() {
    this.dialogRef.close();
    this.isLoggedIn$ = this.afAuth.authState.pipe(map(user => !!user));
    this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));
    this.user$ = this.authService.user$;
  }

here is my code in dashboard.ts

So it should trigger closing the dialog the moment it reaches the component page. but it's not closing the dialog and the dashboard couldn't be displayed. I'm not getting any console error as well so I'm not too sure what went wrong. I've also tried calling this.dialog.closeAll; where it loads the dashboard but the dialog is still not being closed.

and this was where the SignInComponent was triggered

  loginModal() {
    this.dialog.open(SignInComponent)
 };
}

on my html

<form [formGroup]="loginForm" (ngSubmit)="SignIn(email.value, password.value)">
  <mat-form-field>
    <input formControlName="email" name="email" matInput type="text" placeholder="email">
  </mat-form-field>
  <mat-form-field>
    <input formControlName="password" name="password" matInput type="password" placeholder="Password">
  </mat-form-field>
  <div *ngIf="errorCode" class="notification is-danger">
    Email and password does not match
  </div>
  <div class="d-flex flex-column align-items-center">
    <button mat-raised-button  class="button is-success w-100" type="submit" [disabled]="!loginForm.valid">
      Continue
    </button>
  </div>
</form>

Answer 1

Add mat-dialog-close to your close button.

<mat-dialog-actions>
  <button mat-button mat-dialog-close>No</button>
  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
  <button mat-button [mat-dialog-close]="true">Yes</button>
</mat-dialog-actions>