Angular Material Snackbar global configuration

Question

I'm following the guide on Angular Material github to set custom global configuration to use on the snackbar module. This is the guide I'm following.

However, as sais in the docs, there is no export for MAT_SNACK_BAR_DEFAULT_OPTIONS only MAT_SNACK_BAR_DATA but it's not overriding the default configuration.

This is what I tried:

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

providers: [
    { provide: MAT_SNACK_BAR_DATA, useValue: { duration: 2500 } }
]

I also tried like this:

{ provide: MatSnackBarConfig, useValue: { duration: 2500 } }
{ provide: MatSnackBarConfig, useClass: SnackClass }

But none of the options is working. The snack never auto dismiss after the specified time.

Parsley

What version of Angular Material are you using? – Melanite

@Melanite version 5.2.5 – Parsley

MAT_SNACK_BAR_DEFAULT_OPTIONS was implemented since 6.0.0-beta.4 – Melanite

Answer 1

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

providers: [
  {provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 2500}}
]

Rita

Answer 2

I believe you are messing up stuffs here

You should change duration here:

@NgModule({
  providers: [
    {provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 2500}}
  ]
})

and you must inject MAT_SNACK_BAR_DATA inside your constructor:

import {MAT_SNACK_BAR_DATA} from '@angular/material';

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

Tachistoscope

But there is no export for MAT_SNACK_BAR_DEFAULT_OPTIONS. Where do I need to import it from? – Parsley

You only need to import this: import {MatSnackBarModule} from '@angular/material/snack-bar'; see the documentation here: material.angular.io/components/snack-bar/api – Tachistoscope

It's not a must for importing MAT_SNACK_BAR_DATA to the snackbar unless it's a custom snackbar component and whether you want to supply any data to the custom snackbar component. – Melanite