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);
}

Answer 2

::ng-deep support will be dropped, as announced any time soon. Set encapsulation: ViewEncapsulation.None on your message bar component, and you are good to go:

import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material';
import { MessageBarType } from './message-bar.model';

@Component({
  selector: 'app-message-bar',
  templateUrl: 'message-bar.component.html',
  styleUrls: ['message-bar.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MessageBarComponent implements OnInit {

  public MessageBarType: typeof MessageBarType = MessageBarType;

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: { text: String, type: MessageBarType }) { }

  ngOnInit() {
  }
}

Then in your scss file:

@import '~@angular/material/theming';
@import '~app/theme-defs';

snack-bar-container {
  &.error {
    background-color: mat-color($warn);
  }

  &.warning {
    background-color: mat-color($dark-warn);
  }

  &.info {
    background-color: mat-color($accent);
  }
}

Answer 3

From mat SnackBarConfig Class you can add

panelClass: string | string[]

"Extra CSS classes to be added to the snack bar container".

this.snackBar.open("Your custom Message", '', {
      panelClass:"custom_sneak_bar"
}

Answer 4

I made the following code to work with Angular 6 and Angular Material 6.

The service that contain the snackBar calls:

@Injectable()
export class MessageService {
   constructor(private snackBar: MatSnackBar) {}

   showError(message: string) {
      const config = new MatSnackBarConfig();
      config.panelClass = ['background-red'];
      config.duration = 5000;
      this.snackBar.open(message, null, config);
   }
}

Add the css class in the styles.css file:

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

Answer 5

(Angular 9 at the moment) Hi, here is a summary of the two links at the bottom. You get here the call function with css class and variables passed and the way to get their values in the snackBar component. Hope this helps

In the component where you wish to rise a snackBar, the "father component" :

import {
  MatSnackBar
} from '@angular/material/snack-bar';
import {
  SnackBarComponent
} from '../../../shared/snack-bar/snack-bar.component';


@Component({
  selector: 'app-father-component',
  templateUrl: './father-.component.html',
  styleUrls: ['./father-editor.component.scss'],
})
export class FatherComponent implements OnInit {

  private _durationInSeconds = 5;

  get durationInSeconds(): number {
    return this._durationInSeconds;
  }

  set durationInSeconds(value: number) {
    this._durationInSeconds = value;
  }

  private _className: string;

  get className(): string {
    return this._className;
  }

  set className(value: string) {
    this._className = value;
  }

  private _mMessage: string;

  get mMessage(): string {
    return this._mMessage;
  }

  set mMessage(value: string) {
    this._mMessage = value;
  }

  constructor(
    private snackBar: MatSnackBar
  ) {}

  ngOnInit(): void {

    // your onInit code
  }

// Calling that function rises the snackBar, from .ts this.openSnackBar()
// From template event <button (click)="openSnackBar()"></button> etc...
// No needs to insert the <app-snack-bar> tag in the template.

  openSnackBar() {
    this.snackBar.openFromComponent(SnackBarComponent, {
      duration: this.durationInSeconds * 1000,
      data: {
        myMessage: this.mMessage,
        antoherVar: 'antoher message'
      },
      // here this.className is a string which value is a Bulma class 'has-text-info', snackbar automatically uses the value from panelClass
      panelClass: this.className
    });
  }

Then the component which is the snackBar itSelf, the "child component" :

import {
  Component,
  Inject,
  OnInit
} from '@angular/core';
import {
  MAT_SNACK_BAR_DATA
} from '@angular/material/snack-bar';

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.scss'],
})
export class SnackBarComponent implements OnInit {

  myMessage: string;
  antoherVar: string;

  constructor(
    @Inject(MAT_SNACK_BAR_DATA) public data: any
  ) {
  // there you get the datas you have passed to the snackbar through the openSnackBar function in the father-component, setting up local properties to their values
    this.myMessage = data.myMessage;
    this.antoherVar = data.antoherVar;
  }

  ngOnInit(): void {}

}

<!--Here we use the local variable set with the datas passed through the data object -->
<!--No needs to setup a class to use the panelClass value passed, it is automatic -->
<span>{{ myMessage }}</span>

Answer 6

For angular 6 to 9 works with (In your global scss style for material)

Explaination: Customize your snackBar with an @mixin function, in this case is called "@mixin snack-theme($theme)", then you add all classes declared in this function to your templace like this

@include snack-theme($my-app-theme);

Global scss file (styles.scss):

@import '../node_modules/@angular/material/_theming.scss';
@include mat-core();

$background-primary: #232323;
$background-accent: #353535;
$background-warn: #c1640c;
$font-color-default: silver;

$my-app-primary: mat-palette($mat-light-green, 700);
$my-app-accent: mat-palette($mat-cyan, 800 );
$my-app-warn: mat-palette($mat-red, 400);


$my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn);


@mixin snack-theme($theme) {
    // Extract whichever individual palettes you need from the theme.
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);


    .mat-snack-bar-container {
        background-color: $background-accent !important;
        color: $font-color-default;
    }
    //Added with panelClass property
    .snack-error {
        button {
            color: mat-color($warn)
        }
    }
    //Added with panelClass property
    .snack-success {
        button {
            color: mat-color($primary)
        }
    }
}

@include snack-theme($my-app-theme);

...

And calling snack like (In your component)

        this.snackBar.open("your message", 
           "your action",
          {
            duration: 3000,
            panelClass: (isSuccess ? ["snack-success"] : ["snack-error"])
          })

snack-success and snack-error class are defined in @mixed function (@mixin snack-theme)

NOTE: Doesn't forget to include your global scss file in your scss component. For example: