Angular MatSnackBar not working from custom class

Question

I am trying to create a toast using Material Snackbar from a custom class.

I am getting an error in my custom class ( Unable to find open from undefined. ) but working fine in user.service.ts

If ngZone is used, then i am getting an error, (unable to find run from undefined)

Note: In ErrorHandler Class

console.log(this.snackBar) // gives undefined

app.module.ts

 providers: [ErrorHandler],
  bootstrap: [AppComponent]
})
export class AppModule { }

User Service

  import { Injectable } from '@angular/core';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import { catchError } from 'rxjs/operators';
  import { environment } from '../../environments/environment';
  import { ErrorHandler } from '../classes/error-handler';
  import {MatSnackBar} from '@angular/material';

  @Injectable({
    providedIn: 'root'
  })
  export class UserService {

    private url = environment.api+'/login';
    constructor(private http: HttpClient, private eh:ErrorHandler, private sb: MatSnackBar) { }

    login(credentials){
      this.sb.open("hello world"); // Working Fine
      return this.http.post(this.url, {})
        .pipe(
          catchError(this.eh.handleError)
        );
    }
  }

Error Handler Class

    import {Component, Injectable, NgZone} from '@angular/core';
    import { HttpErrorResponse } from '@angular/common/http';
    import { throwError } from 'rxjs';
    import * as _ from 'lodash';
    import {MatSnackBar} from '@angular/material';

    @Injectable({
        providedIn: 'root'
    })
    export class ErrorHandler {
        constructor (private snackBar: MatSnackBar) {}

        public handleError(error: HttpErrorResponse) {
            if (error.error instanceof ErrorEvent) {
            console.error('An error occurred:', error.error.message);
            } else {
                console.error("Error code working")
                console.log(this.snackBar) // gives undefined
                this.snackBar.open("Hello world"); // Throwing Error
            }
            // return an observable with a user-facing error message
            return throwError('Something bad happened; please try again later.');
        };
    }

Thanks for replying. I am passing the error and verified by the line console.error("Error code working"). But below line snackbar.open is not working — Alaksandar Jesus Gene
Why are you logging the snackbar variable? And could you show us the full code of your app.module.ts file? — Edric

Alaksandar Jesus Gene Alaksandar Jesus Gene · Accepted Answer · 2019-03-09T16:25:22

Thanks to all. I fixed it. Unfortunately i missed the stackoverflow link.

Change in

 catchError((res) => this.eh.handleError(res))

did the trick

UserService

import { Injectable } from '@angular/core';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import { catchError } from 'rxjs/operators';
  import { environment } from '../../environments/environment';
  import { ErrorHandler } from '../classes/error-handler';
  import {MatSnackBar} from '@angular/material';

  @Injectable({
    providedIn: 'root'
  })
  export class UserService {

    private url = environment.api+'/login';
    constructor(private http: HttpClient, private eh:ErrorHandler, private sb: MatSnackBar) { }

    login(credentials){
      this.sb.open("hello world"); // Working Fine
      return this.http.post(this.url, {})
        .pipe(
          catchError((res) => this.eh.handleError(res)) // change in this line
        );
    }
  }

Angular MatSnackBar not working from custom class

1 Answers