foggy harbor
Below is my code for my angular service. The idea is that I call the service to open up a snackbar to display the message.
import { Injectable, NgZone } from '@angular/core';
export const SNACKBAR_DURATION = 50000;
export const SNACKBAR_SUCCESS = {
duration: SNACKBAR_DURATION,
panelClass: ['notify-success'],
};
export const SNACKBAR_WARNING = {
duration: SNACKBAR_DURATION,
panelClass: ['notify-warning'],
};
export const SNACKBAR_ERROR = {
duration: SNACKBAR_DURATION,
panelClass: ['notify-error'],
};
@Injectable({
providedIn: 'root'
})
export class NotificationService {
constructor( public snackBar: MatSnackBar, private zone: NgZone) { }
showSuccess(message: string): void {
this.zone.run(() => {
this.snackBar.open(message, 'Dismiss', SNACKBAR_SUCCESS);
});
}
showWarning(message: string): void {
this.zone.run(() => {
this.snackBar.open(message, 'Dismiss', SNACKBAR_WARNING);
});
}
showError(message: string): void {
this.zone.run(() => {
this.snackBar.open(message, 'Dismiss', SNACKBAR_ERROR);
});
}
}```
Below are the styles in the global styles.scss
.notify-success {
color: #155724 !important;
background-color: success !important;
border-color: #c3e6cb !important;
.mat-simple-snackbar-action {
color: #155724 !important;
}
}
.notify-error {
opacity: 0.8;
color: white !important;
background-color: $alert !important;
border-color: #c3e6cb !important;
.mat-simple-snackbar-action {
color: white !important;
}
}
.notify-warning {
color: $warning !important;
background-color: $warning !important;
border-color: #c3e6cb !important;
.mat-simple-snackbar-action {
color: #000000 !important;
}
}
I tried putting ::ng-deep before the classes , but none of the styles seem to be applying.
sour root