MatSnackBar position error and hide

Question

I am handling errors with MatSnackBar and I have problems with the position in which the dialog is displayed and it is not hidden automatically.

service.ts

facebookLogin() {
const provider = new firebase.auth.FacebookAuthProvider();
return this.oAuthLogin(provider);
}

private oAuthLogin(provider) {
return this.afAuth.auth.signInWithPopup(provider)
  .then((credential) => {
    this.pushUserData(credential.user)
    this.router.navigate(['/userProfile'])
  })
  .catch(error => {
    this.handleError(error);

  });
}

private handleError(error: Error) {
  console.error(error);
  this.snackBar.open(error.message, this.action, { duration: 1000 });
}

component.ts

facebookLogin() {
  this.auth.facebookLogin()
}

When I test it from the same component, everything works normal:

openSnackBar() {
this.snackBar.open(this.message, this.action, {
  duration: 500,
});
}

Answer 1

I solved it in the following way, adding ngZone:

import { Injectable, NgZone } from '@angular/core';

constructor( public snackBar: MatSnackBar, private zone: NgZone )

private handleError(error: Error) {
console.error(error);
  this.zone.run(() => {
    this.snackBar.open(error.message, 'CERRAR', {
      duration: 5000,
    });
  });
}