How to inject snackBarRef into a component with openFromComponent

Question

The latest Material documentation says the following..

If you want to close a custom snack-bar that was opened via openFromComponent, from within the component itself, you can inject the MatSnackBarRef.

but they don't show you how to do it.

In their example, they nest a component within the same .ts file as the calling module, and they don't show the ref being passed in. But since I want to use a more centralized approach, I have created a new module using...

ng g component components/snackbar

This way, I should be able to pass in @Input to render different html depending on need. This would further allow for things like branding, multiple buttons, and for html buttons to dismiss the snackbar… as long as they have access to a ref!

My calling .ts has the following...

var snackBarRef : any;
snackBarRef = this.snackBar.openFromComponent(SnackbarComponent, {data : snackBarRef});

the component .ts has the following constructor...

constructor(public snackBar: MatSnackBar, @Inject(MAT_SNACK_BAR_DATA) public data: any) { }

My expectations are that I could then create a function in the component that could act upon snackBarRef.dismiss(); as needed. However, when I run the app, I get the following error...

Uncaught (in promise): Error: StaticInjectorError(AppModule)[SnackbarComponent -> InjectionToken MatSnackBarData]: 
  StaticInjectorError(Platform: core)[SnackbarComponent -> InjectionToken MatSnackBarData]

Just to make sure I had the plumbing right, I swapped out {data : snackBarRef} to {data : 0}. By doing that, I don't see any errors and I can use the data value of 0 for other things, but of course I also don't have a handle on the ref to use locally.

Is there another way to pass the snackBarRef into the component other than using the data section of the openFromComponent? or, alternatively, is there a way to pass the ref through the data section without causing the error?

Answer 1

I was stuck on the same problem today, but found the solution:

import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material';

@Component({
  selector: 'my-notification',
  template: `
    <p>{{ data.message }}</p>
    <button mat-raised-button
            color="accent"
            (click)="snackBarRef.dismiss()">{{ data.action }}</button>
  `,
})
export class TestNotificationComponent {
  constructor(
    public snackBarRef: MatSnackBarRef<TestNotificationComponent>,
    @Inject(MAT_SNACK_BAR_DATA) public data: any,
  ) {}
}

Angular will handle injecting the snackBarRef.