-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Feature Description
Please provide styles for using standard SnackBar layout in custom ones. Specifically classes mat-simple-snackbar
and mat-simple-snackbar-action
so users can easily add action button in their custom snackbar with same look&feel.
Use Case
From three open methods only the one support passing an action - open
:
snackBar.open('message', 'Dismiss');
snackBar.openFromComponent(CustomSnackBar, { data: { message: "message"} });
snackBar.openFromTemplate(this.snackbarTemplate);
it's understandable as the two others allow to customize layouts and this is exactly why we need them.
But, let's suppose I need a custom layout and a Dismiss button. I should choose between openFromComponent
and openFromTemplate
methods and then implement the dismiss button in my markup.
The problem is that I want the same look and feed as in snackbars that opened via the open
method.
I tried to use SB's standard styles:
<div class="mat-simple-snackbar">
<span>{{ data.message }}</span>
<div class="mat-simple-snackbar-action">
<button mat-icon-button (click)="sbRef.dismiss()">
<span class="mat-button-wrapper">Dismiss</span>
</button>
</div>
</div>
but it doesn't work as it seems the styles are being added dynamically when a new SnackBar is opened via open
.
BTW it creats an inconsistent behavior when I open my custom snackbar, then a standard one and then again my own. The latter will have a different layout then the first one (probably because of some dynamically added styles left).