Using MatSnackBar in a library

I have an issue with using MatSnackBar from within a library.
I have created a simple component which looks like this:

<div class="situ-error-snackbar">
    <button type="button" mat-icon-button (click)="close()">

The code just looks like this:

import {
} from '@angular/core';

import {
} from '@angular/material/snack-bar';

  selector: 'situ-error-snackbar',
  templateUrl: './error-snackbar.component.html',
  styleUrls: ['./error-snackbar.component.scss'],
  encapsulation: ViewEncapsulation.None,
export class ErrorSnackbarComponent implements OnInit {
  @Input() duration: number = 5000;

  public constructor(
    @Inject(MAT_SNACK_BAR_DATA) public message: string,
    public snackBarRef: MatSnackBarRef<ErrorSnackbarComponent>
  ) {}

  public ngOnInit(): void {}

  public close(): void {

And I have a service which invokes it:

public show(notifcation: Notification): void {
  let config: MatSnackBarConfig = {
    panelClass: notifcation.type,
    verticalPosition: 'top',
    duration: 5000,
    data: notifcation.message,

  this.snackBar.openFromComponent(ErrorSnackbarComponent, config);

All of this is in a custom library I have been developing.
The error-snackbar has a module which looks like this:

import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBarModule } from '@angular/material/snack-bar';

import { ErrorSnackbarComponent } from './error-snackbar.component';

  imports: [MatButtonModule, MatIconModule, MatSnackBarModule],
  declarations: [ErrorSnackbarComponent],
  exports: [ErrorSnackbarComponent],
export class ErrorSnackbarModule {}

In my application, I want to display the ErrorSnackbar whenever there is an error, so I added it to the AppComponent as follows:



And I import the library module in app.module like this:

    declarations: [AppComponent],
    imports: [


    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: BearerAuthInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
        { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
    bootstrap: [AppComponent],
export class AppModule {}

In my opinion, this should just work. I have many other components that are in that library and they all work fine. But when I try to run my application in the state above, I get this error:

ERROR NullInjectorError: R3InjectorError(AppModule)[InjectionToken MatSnackBarData -> InjectionToken MatSnackBarData -> InjectionToken MatSnackBarData]:
NullInjectorError: No provider for InjectionToken MatSnackBarData!

I googled the error and found something similar here:

So I did what they said and added this to the app.module:

    provide: MAT_SNACK_BAR_DATA,
    useValue: {}, // Add any data you wish to test if it is passed/used correctly

When I do that, I get a new error:

ERROR NullInjectorError: R3InjectorError(AppModule)[MatSnackBarRef -> MatSnackBarRef -> MatSnackBarRef]:
NullInjectorError: No provider for MatSnackBarRef!

So I tried to add another provider like this:

        provide: MatSnackBarRef,
        useClass: MatSnackBarRef,

And now I get a new message:

main.ts:12 Error: Can’t resolve all parameters for MatSnackBarRef: (?, ?).

I don’t understand why I am having to mess around with providers. Does anyone know what I am doing wrong?

Source: Angular Material Quesions

One Reply to “Using MatSnackBar in a library”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.