ngxpert/hot-toast

Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from react-hot-toast

Sponsorships aid in the continued development and maintenance of ngxpert libraries. Consider asking your company to sponsor ngxpert as its core to their business and application development.

• 🔥 Hot by default
• ☕ Easy to use
• 🐍 Snackbar variation
• ♿ Accessible
• 🖐️ Reduce motion support
• 😊 Emoji Support
• 🛠 Customizable
• ⏳ Observable API
• ✋ Pause on hover
• 🔁 Events
• 🔒 Persistent
• 🎭 Grouping
• 🔒 CSP Compatible

Using Angular CLI:

ng add @ngxpert/hot-toast

With npm:

npm install @ngneat/[email protected] @ngxpert/hot-toast

or yarn

yarn add @ngneat/[email protected] @ngxpert/hot-toast

# For Angular version >= 9.1.13 < 13
npm install @ngneat/[email protected] @ngneat/hot-toast@3

# For Angular version >= 13 < 15
npm install @ngneat/[email protected] @ngneat/hot-toast@4

# For Angular version >= 15 <16
npm install @ngneat/[email protected] @ngneat/hot-toast@5

# For Angular version >= 16 <17
npm install @ngneat/[email protected] @ngneat/hot-toast@6

# For Angular version >= 17 <18
npm install @ngneat/[email protected] @ngxpert/hot-toast@2

# For Angular version >= 18 <19
npm install @ngneat/[email protected] @ngxpert/hot-toast@3

import { AppComponent } from './src/app.component';

import { provideHotToastConfig } from '@ngxpert/hot-toast';

bootstrapApplication(AppComponent, {
  providers: [
    provideHotToastConfig(), // @ngxpert/hot-toast providers
  ]
});

Add provideHotToastConfig() to your app.module.ts providers section. Toast options (Partial<ToastConfig>) here.:

import { providerHotToastConfig } from '@ngxpert/hot-toast';

@NgModule({
  providers: [provideHotToastConfig()],
})
class AppModule {}

if you use SCSS add this line to your main styles.scss:

@use '@ngxpert/hot-toast/src/styles/styles.scss';

or if you use CSS add this to your styles inside your angular.json:

"styles": [
     "node_modules/@ngxpert/hot-toast/src/styles/styles.css",
],

import { HotToastService } from '@ngxpert/hot-toast';

@Component({})
export class AppComponent {
  constructor(private toast: HotToastService) {}

  showToast() {
    this.toast.show('Hello World!');
    this.toast.loading('Lazyyy...');
    this.toast.success('Yeah!!');
    this.toast.warning('Boo!');
    this.toast.error('Oh no!');
    this.toast.info('Something...');
  }

  update() {
    saveSettings
      .pipe(
        this.toast.observe({
          loading: 'Saving...',
          success: 'Settings saved!',
          error: 'Could not save.',
        })
      )
      .subscribe();
  }
}

You can pass ToastOptions while creating the toast to customize the look and behavior:

import { HotToastService } from '@ngxpert/hot-toast';

@Component({})
export class AppComponent {
  constructor(private toast: HotToastService) {}

  customToast() {
    this.toast.success('Look at my styles, and I also need more time!', {
      duration: 5000,
      style: {
        border: '1px solid #713200',
        padding: '16px',
        color: '#713200',
      },
      iconTheme: {
        primary: '#713200',
        secondary: '#FFFAEE',
      },
    });
  }
}

You can also set global ToastConfig options while importing:

import { provideHotToastConfig } from '@ngxpert/hot-toast';

@NgModule({
  providers: [
    provideHotToastConfig({
      reverseOrder: true,
      dismissible: true,
      autoClose: false,
    }),
  ],
})
class AppModule {}

Additionally, you have the option of using a standalone function to provide a global toast configuration within your app's configuration file:

// app.config.ts
import { provideHotToastConfig } from '@ngxpert/hot-toast';

export const appConfig: ApplicationConfig = {
  providers: [provideHotToastConfig({ ... })],
};

You can checkout examples at: https://ngxpert..io/hot-toast#examples.

All options, which are set Available in global config? from ToastOptions are supported. Below are extra configurable options:

Configuration used when opening an hot-toast.

Latest versions of Chrome, Edge, Firefox and Safari are supported, with some known issues.

Hot-toast messages are announced via an aria-live region. By default, the polite setting is used. While polite is recommended, this can be customized by setting the ariaLive property of the ToastConfig or ToastOptions.

Focus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.

Hot-toasts that have an action available should be set autoClose: false, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.

The <div> surrounding <ng-container> is removed from .hot-toast-message to better and easy structure of layout. User may need to check their templates after updating to v2.

None

Thanks goes to these wonderful people (emoji key):

Dharmen Shah 💻 🖋 🎨 📖 💡

Netanel Basal 🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀

Timo Lins 🎨 🤔

Patrick Miller 🚧 📦

Gili Yaniv 💻

Artur Androsovych 🚧

Luis Castro 💻

This project follows the all-contributors specification. Contributions of any kind welcome!