How to Create Toast Notification in Angular Quickly

To create a toast notification in Angular, use Angular Material's MatSnackBar service. Inject MatSnackBar in your component and call open() with your message and options to show a brief popup notification.

Syntax

The basic syntax to show a toast notification using Angular Material's MatSnackBar is:

• this.snackBar.open(message, action?, config?)

Where:

• message is the text shown in the toast.
• action is an optional label for a button (like 'Undo').
• config is an optional object to set duration, position, and styling.

typescript

this.snackBar.open('Message text', 'Action', { duration: 3000, horizontalPosition: 'right', verticalPosition: 'top' });

Output

A small popup appears at the top-right corner with 'Message text' and an 'Action' button, disappearing after 3 seconds.

Example

This example shows how to add a button that triggers a toast notification using Angular Material's MatSnackBar. The toast appears at the bottom center and disappears after 2 seconds.

typescript

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

@Component({
  selector: 'app-toast-example',
  template: `
    <button mat-button (click)="showToast()">Show Toast</button>
  `,
})
export class ToastExampleComponent {
  constructor(private snackBar: MatSnackBar) {}

  showToast() {
    this.snackBar.open('This is a toast notification!', 'Close', {
      duration: 2000,
      horizontalPosition: 'center',
      verticalPosition: 'bottom',
    });
  }
}

Output

When clicking the 'Show Toast' button, a small notification appears at the bottom center with the message and a 'Close' button, disappearing after 2 seconds.

Common Pitfalls

Common mistakes when creating toast notifications in Angular include:

• Not importing MatSnackBarModule in your Angular module, causing errors.
• Forgetting to inject MatSnackBar in the component constructor.
• Setting duration too low or missing it, so the toast disappears instantly or never.
• Not adding Angular Material styles, so the toast looks unstyled or broken.

Always ensure you import MatSnackBarModule in your AppModule and include Angular Material theme CSS.

typescript

/* Wrong: Missing import in module */
@NgModule({
  declarations: [ToastExampleComponent],
  imports: [BrowserModule], // Missing MatSnackBarModule
  bootstrap: [ToastExampleComponent]
})
export class AppModule {}

/* Right: Import MatSnackBarModule */
import { MatSnackBarModule } from '@angular/material/snack-bar';

@NgModule({
  declarations: [ToastExampleComponent],
  imports: [BrowserModule, MatSnackBarModule],
  bootstrap: [ToastExampleComponent]
})
export class AppModule {}

Quick Reference

Tips for using Angular Material toast notifications:

• Import MatSnackBarModule in your module.
• Inject MatSnackBar in your component constructor.
• Use open() with message, optional action, and config.
• Set duration in milliseconds to auto-close the toast.
• Control position with horizontalPosition and verticalPosition.
• Include Angular Material theme CSS for proper styling.

Key Takeaways

Use Angular Material's MatSnackBar service to create toast notifications easily.

Always import MatSnackBarModule in your Angular module before using it.

Call snackBar.open() with a message, optional action, and config for duration and position.

Set a duration to make the toast disappear automatically after a few seconds.

Include Angular Material theme CSS to ensure the toast looks styled and consistent.