Angular 5 and material - How to change the background color from SnackBar component
AngularAngular Material2Angular Problem Overview
I have to change the background from the snackbar component. I'm using it to alert or inform the user about some either error or completed action the user did.
The material version from the project. "@angular/material": "^5.0.0-rc.1",
The documentation https://material.angular.io/components/snack-bar/api say about an api to change the class.
panelClass: string | string[] Extra CSS classes to be added to the snack bar container.
This is what I add in the css file.
.mycsssnackbartest {
background-color: blue;
}
This is the code to open the snackbar
this.snackBar.open('Informing the user about sth', 'User Message' , {
panelClass: ['mycsssnackbartest ']
} );
What am I doing wrong?
Angular Solutions
Solution 1 - Angular
You have to use the panelClass
option (since v6) to apply classes on a snackbar like this:
this.snackBar.open(message, action, {
duration: 2000,
panelClass: ['blue-snackbar']
});
CSS (in global styles.scss):
.blue-snackbar {
background: #2196F3;
}
See the Stackblitz example
Solution 2 - Angular
Using themes:
Primary:
this.snackBar.open('Some message','Some action', {
duration: 2000,
panelClass: ['mat-toolbar', 'mat-primary']
});
Switch: 'mat-primary'
to 'mat-accent'
or 'mat-warn'
Solution 3 - Angular
//in component.ts
this.snackbar.open(message, '', {
duration: 2000,
verticalPosition: 'top',
panelClass: ['warning']
});
//in component.css
::ng-deep .warning{
background: 'yellow';
}
Solution 4 - Angular
Yeah after adding ::ng-deep in global style file(.css) works fine after each attribute... As follows
noMatchConfig: MatSnackBarConfig = {
duration: 2000,
horizontalPosition: 'right',
verticalPosition: 'top',
panelClass:['redNoMatch']
}
::ng-deep .redNoMatch
{
color:white;
background: #F44336 !important;
}
Solution 5 - Angular
This can also be achieved globally by importing MAT_SNACK_BAR_DEFAULT_OPTIONS
in app.module.ts
:
app.module.ts
import {
MatSnackBarModule,
MAT_SNACK_BAR_DEFAULT_OPTIONS,
} from '@angular/material/snack-bar';
@NgModule({
providers: [
{
provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
useValue: { panelClass: ['mycsssnackbartest'] },
},
],
})
styles.css
.mycsssnackbartest {
background-color: blue;
}