Angular 2/4 How to style angular material design snackbar

Question

I am new to Angular2/4 and angular typescript. I want to style the angular material design snackbar for example change the background color from black and font

Answer 1

Angular 5 and above you dont need to use custom config service just pass extraClasses array after duration on method openFromComponent.

Here's how

app.module.ts:

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

Add to import

@NgModule({ declarations: [ .. ], imports: [ MatSnackBarModule ].... 

component.ts:

Requires following import in the component:

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

Example method that calls SnackBar

openSnackBar(message, type) {
   let extraClasses;
   if (type == 'error') {
     extraClasses = ['background-red'];
   } else {
     extraClasses = ['background-green'];
 }

 this.snackBar.openFromComponent(SnackBarTemplateComponent, {
   duration: 30000,
   extraClasses: extraClasses,
   data: {
     message: message,
     type:type
   }
 });
}

Add respective classes to global style.css style.css:

.background-red{
  background-color: rgb(153, 50, 50);
}
.background-green{
  background-color: rgb(29, 102, 29);
}