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 color to something else.
How do i go about styling the "snackbar" ?
I have the material design snackbar in the service/core and to make it available i call it in every component as needed.
How can I style the Angular 2 material design "snackbar"in Angular 2/4? I have included the code snippet below:
service/core
import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable'
import { DOCUMENT } from'@angular/platform-browser';
import { MdDialog, MdDialogRef } from '@angular/material';
import { MdDialogConfig, ComponentType } from '@angular/material';
import {MdSnackBar} from '@angular/material';
constructor(
public dialog: MdDialog,
public snackBar: MdSnackBar,
@Inject(DOCUMENT) public doc: any ) {
dialog.afterOpen.subscribe((ref: MdDialogRef<any>) => {
if (!doc.body.classList.contains('no-scroll')) {
doc.body.classList.add('no-scroll');
}
});
dialog.afterAllClosed.subscribe(() => {
doc.body.classList.remove('no-scroll');
}); }
openSnackBar(message: string, action?: string) {
this.snackBar.open(message, action, {
duration: 4000,
}); }
wiz.components.ts
….
saveData(): void {
this.advisorClientModel.currentStep = this.currentStep;
this.advisorClientModel.clientId = this.faService.getClientId();
this.advisorClientModel.isMaxAmount = this.isMaximumAmount;
this.advisorClientModel.desiredLoanAmount = this.loanAmount;
this.advisorClientModel.maxLoanAmount = this.eligibleSelected.advanceAmount;
this.advisorClientModel.pledgedAccounts = this.getPledgedAccountsArray();
this.advisorClientModel.pledgedMarketValue = this.getPledgedMarkeValue();
this.faService.updateAdvisorClient( this.advisorClientModel )
.subscribe(
successModel => {
this.coreService.openSnackBar("Your Data Has been Saved");
this.navigateTo("fa/wiz" + (this.currentStep + 1));
},
error => {
this.onError(error);
}
);
}
Best Answer
md-snackbar
provides a service to provide customconfig
. One the properties ofconfig
isextraClasses
that allows to add CSS classes to the snack bar container (doc).extraClasses
can be used with::ng-deep
to override the default CSS classes. Here's an example:component.ts:
Requires following
import
in the component:(providing custom configuration)
component.css:
Here's a Plunker demo if you would like to try.
NOV 2018 UPDATE: Angular 6+
The syntax has changed a bit, with the
md-
prefix being replacedmat-
andextraClasses
was replaced withpanelClass
. The function is overall the same though:and the imports too: