Angular Material Snackbar: Customizing Size and Placement

Angular Material’s Snackbar provides a sleek and unobtrusive way to display notifications in your Angular applications. While the default configuration works well in many cases, there are times when you may want to customize the size and placement of the Snackbar to better suit your design.

Here is an example of a snackbar:

Getting Started

Before diving into customization, ensure that you have Angular Material’s MatSnackBarModule imported in your Angular module.

import { MatSnackBarModule } from '@angular/material/snack-bar';

@NgModule({
  imports: [MatSnackBarModule],
  // other module configurations
})
export class YourModule { }

Injecting MatSnackBar

Inject the MatSnackBar service in the component or service where you plan to use the Snackbar.

import { MatSnackBar } from '@angular/material/snack-bar';

constructor(private snackBar: MatSnackBar) { }

Customization Options

1. Duration

Control how long the Snackbar remains visible with the duration option. Set it in milliseconds.

this.snackBar.open('Your message here', 'Close', {
  duration: 2000, // Set the duration in milliseconds
});

2. Positioning

Adjust the position of the Snackbar using the horizontalPosition and verticalPosition options.

this.snackBar.open('Your message here', 'Close', {
  horizontalPosition: 'start', // Options: 'start', 'center', 'end'
  verticalPosition: 'bottom', // Options: 'top', 'bottom'
});

3. Styling

Customize the appearance by adding a custom styling class with the panelClass option.

this.snackBar.open('Your message here', 'Close', {
  panelClass: ['custom-snackbar', 'snackbar-success'],,
});

We can create a success as well as an error class for the snackbar to show the success and error notification.

1. Common Styles —

 .custom-snackbar {
    .mat-mdc-snack-bar-container .mdc-snackbar__surface {
      border-radius: 8px !important;
    }

    .mat-mdc-button.mat-mdc-snack-bar-action {
      color: white !important;
    }
  }

• .mat-mdc-snack-bar-container .mdc-snackbar__surface: Targets the container surface of the Snackbar and sets a border-radius of 8 pixels. The !important rule ensures that this style takes precedence, overriding any conflicting styles.
• .mat-mdc-button.mat-mdc-snack-bar-action: Targets the action button within the Snackbar and sets the text color to white. The !important rule enforces this style.

2. Success Styles —

.snackbar-success {
  .mdc-snackbar__surface {
    background-color: var(--color-primary) !important;
  }

  .mdc-snackbar__label {
    color: white !important;
  }
}

• .mdc-snackbar__surface: Targets the surface of the Snackbar in the success case and sets the background color to the primary color (using a custom CSS variable --color-primary). The !important rule ensures this style takes precedence.
• .mdc-snackbar__label: Targets the label (text) within the Snackbar in the success case and sets the text color to white. The !important rule enforces this style.

3. Error Styles —

.snackbar-error {
  .mdc-snackbar__surface {
    background-color: red !important;
  }

  .mdc-snackbar__label {
    color: white !important;
  }
}

• .mdc-snackbar__surface: Targets the surface of the Snackbar in the error case and sets the background color to red. The !important rule ensures this style takes precedence.
• .mdc-snackbar__label: Targets the label (text) within the Snackbar in the error case and sets the text color to white. The !important rule enforces this style.

These styles allow you to create a consistent and visually appealing design for success and error Snackbars in your Angular Material application.

Conclusion:

By leveraging these customization options, you can tailor the Angular Material Snackbar to seamlessly integrate with your application’s design. Whether it’s adjusting the duration, positioning, or adding your custom styling, the Snackbar provides a versatile and user-friendly way to communicate with your users.

Feel free to experiment with these options to find the perfect fit for your application’s user experience.