---
title: "Angular Forms Toast & snackbar Example | Mobiscroll"
component: "Forms"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/forms/notifications"
---

# Toast & snackbar - Angular Forms demo

Angular notification examples of toast and snackbar with or w/o action. With undo, retry or custom functionality. For Angular 22 and Ionic 8.

- [Live demo](https://demo.mobiscroll.com/angular/forms/notifications)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/form-components/forms/notifications)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/notifications.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/notifications.md), [React](https://demo.mobiscroll.com/react/forms/notifications.md), [Vue](https://demo.mobiscroll.com/vue/forms/notifications.md)

## Description

Use toast and snackbars to post updates to the users without interrupting them. These notifications can be top/bottom positioned and come in different colors.

## What this demo shows

- This demo shows Toast and Snackbar notifications for providing feedback and status updates without interrupting the user.
- **Placement** Notifications positioned at the top or bottom of the screen.
- **Preset styles** Primary, secondary, success, danger, warning, and info color options.
- **Toast** Lightweight, temporary messages that confirm an action has been completed.
- **Snackbar** Notifications displayed with or without an action button.
- **Snackbar actions** Custom action labels that execute application logic, such as retrying a failed operation.

## Best for

- **Save confirmations** Letting users know that their data was saved successfully.
- **Event creation feedback** Confirming that an event was created without interrupting the workflow.
- **Status updates** Communicating short, temporary updates while users continue their current task.
- **Recoverable errors** Providing a Snackbar action that lets users retry a failed operation.
- **Non-blocking feedback** Sharing information that does not require a modal dialog or immediate response.

## Tutorial

### Toast

Top or bottom, in a number of preset colors, use the toast to inform users. Perfect for feedback on data save, event creation and much more.

```ts
constructor(public notify: Notifications) { }

this.notify.toast({
    message: 'Message sent'
});

this.notify.toast({
    message: 'Message sent',
    display: 'top'
});

this.notify.toast({
    message: 'Message sent',
    color: 'primary'
});

this.notify.toast({
    message: 'Message sent',
    color: 'secondary'
});

this.notify.toast({
    message: 'Message sent',
    color: 'success'
});

this.notify.toast({
    message: 'Message sent',
    color: 'danger'
});

this.notify.toast({
    message: 'Message sent',
    color: 'warning'
});

this.notify.toast({
    message: 'Message sent',
    color: 'info'
});
```

### Snackbar

The snackbar can be rendered with or without and action. Actions can have custom labels and when clicked can call any custom code.

```ts
constructor(public notify: Notifications) { }

this.notify.snackbar({
    message: 'Your draft has been discarded',
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    display: 'top'
});

this.notify.snackbar({
    message: 'Connection timed out. Showing limited messages.',
    button: {
        text: 'Retry',
        action: function () {
            this.notify.toast({
                message: 'Retrying...'
            });
        }
    }
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'primary'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'secondary'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'success'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'danger'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'warning'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'info'
});
```

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, Notifications, setOptions } from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light',
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  constructor(public notify: Notifications) {}

  bottomToast(): void {
    this.notify.toast({
      message: 'Message sent',
    });
  }

  topToast(): void {
    this.notify.toast({
      message: 'Message sent',
      display: 'top',
    });
  }

  primaryToast(): void {
    this.notify.toast({
      message: 'Message sent',
      color: 'primary',
    });
  }

  secondaryToast(): void {
    this.notify.toast({
      message: 'Message sent',
      color: 'secondary',
    });
  }

  successToast(): void {
    this.notify.toast({
      message: 'Message sent',
      color: 'success',
    });
  }

  dangerToast(): void {
    this.notify.toast({
      message: 'Message sent',
      color: 'danger',
    });
  }

  warningToast(): void {
    this.notify.toast({
      message: 'Message sent',
      color: 'warning',
    });
  }

  infoToast(): void {
    this.notify.toast({
      message: 'Message sent',
      color: 'info',
    });
  }

  bottomSnackbar(): void {
    this.notify.snackbar({
      message: 'Your draft has been discarded',
    });
  }

  topSnackbar(): void {
    this.notify.snackbar({
      message: 'Your draft has been discarded',
      display: 'top',
    });
  }

  actionSnackbar(): void {
    this.notify.snackbar({
      message: 'Connection timed out. Showing limited messages.',
      button: {
        text: 'Retry',
        action: () => {
          this.notify.toast({
            message: 'Retrying...',
          });
        },
      },
    });
  }

  primarySnackbar(): void {
    this.notify.snackbar({
      message: 'Your draft has been discarded',
      color: 'primary',
    });
  }

  secondarySnackbar(): void {
    this.notify.snackbar({
      message: 'Your draft has been discarded',
      color: 'secondary',
    });
  }

  successSnackbar(): void {
    this.notify.snackbar({
      message: 'Your draft has been discarded',
      color: 'success',
    });
  }

  dangerSnackbar(): void {
    this.notify.snackbar({
      message: 'Your draft has been discarded',
      color: 'danger',
    });
  }

  warningSnackbar(): void {
    this.notify.snackbar({
      message: 'Your draft has been discarded',
      color: 'warning',
    });
  }

  infoSnackbar(): void {
    this.notify.snackbar({
      message: 'Your draft has been discarded',
      color: 'info',
    });
  }
}
```

### Template

```html
<mbsc-page>
  <div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Toast</div>
    <div class="mbsc-button-group-block">
      <mbsc-button (click)="bottomToast()">Bottom toast</mbsc-button>
      <mbsc-button (click)="topToast()">Top toast</mbsc-button>
      <mbsc-button (click)="primaryToast()">Primary toast</mbsc-button>
      <mbsc-button (click)="secondaryToast()">Secondary toast</mbsc-button>
      <mbsc-button (click)="successToast()">Success toast</mbsc-button>
      <mbsc-button (click)="dangerToast()">Danger toast</mbsc-button>
      <mbsc-button (click)="warningToast()">Warning toast</mbsc-button>
      <mbsc-button (click)="infoToast()">Info toast</mbsc-button>
    </div>
  </div>
  <div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Snackbar</div>
    <div class="mbsc-button-group-block">
      <mbsc-button (click)="bottomSnackbar()">Bottom snackbar</mbsc-button>
      <mbsc-button (click)="topSnackbar()">Top snackbar</mbsc-button>
      <mbsc-button (click)="actionSnackbar()">Snackbar with action</mbsc-button>
      <mbsc-button (click)="primarySnackbar()">Primary snackbar</mbsc-button>
      <mbsc-button (click)="secondarySnackbar()">Secondary snackbar</mbsc-button>
      <mbsc-button (click)="successSnackbar()">Success snackbar</mbsc-button>
      <mbsc-button (click)="dangerSnackbar()">Danger snackbar</mbsc-button>
      <mbsc-button (click)="warningSnackbar()">Warning snackbar</mbsc-button>
      <mbsc-button (click)="infoSnackbar()">Info snackbar</mbsc-button>
    </div>
  </div>
</mbsc-page>
```

## Implementation notes

- `message` sets the notification text for both `toast` and `snackbar`.
- `color` sets a preset color for either notification type: `primary`, `secondary`, `success`, `danger`, `warning`, `info`. Omitting it renders the default (neutral) style.
- `display: 'top'` positions the notification at the top of its container; omitting `display` defaults to bottom placement.
- `context` scopes the notification to render inside a given container element/selector instead of the document body - used in the demo to keep each notification confined to the demo panel.
- A snackbar action button is added with `button: { text: string, action: () => void }`; `text` labels the button and `action` runs on click (the demo's action re-triggers a `toast` call to confirm the retry).
- Framework invocation differs by framework: JS/jQuery call the global `mobiscroll.toast({...})` / `mobiscroll.snackbar({...})` functions imperatively from a click handler; Angular injects the `Notifications` service and calls `this.notify.toast({...})` / `this.notify.snackbar({...})`; React and Vue instead render declarative `<Toast>`/`<Snackbar>` components (`MbscToast`/`MbscSnackbar` in Vue) with a boolean `isOpen` prop (`:isOpen` in Vue) held in state and set to `true` to show the notification, and an `onClose`/`@close` callback that resets that state when the notification dismisses itself.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-angular.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Previous: [Alert, confirm & prompt](https://demo.mobiscroll.com/angular/forms/alert-confirm-prompt.md) - Angular alert, confirm and prompt dialogs for giving feedback to users and for quick & focused data entry.