Home

Awesome

<p align="center"> <img width="20%" height="20%" src="./assets/logo.svg?raw=true"> </p> <br />

npm MIT commitizen PRs styled with prettier linted with eslint All Contributors ngxpert cypress semantic-release

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

https://github.com/ngxpert/hot-toast/assets/6831283/ae718568-d5ea-47bf-a41d-6aabc7d4a044

Compatibility with Angular Versions

<table> <thead> <tr> <th>@ngxpert/hot-toast</th> <th>Angular</th> </tr> </thead> <tbody> <tr> <td> 1.x, 2.x </td> <td> >= 17 < 18 </td> </tr> <tr> <td> 3.x </td> <td> >= 18 </td> </tr> </tbody> </table>

For older Angular versions, keep using @ngneat/hot-toast from npm.

Features

Installation

With npm:

npm install @ngneat/overview@6.0.0 @ngxpert/hot-toast

or yarn

yarn add @ngneat/overview@6.0.0 @ngxpert/hot-toast
<details> <summary>For older versions</summary>

You can install it through Angular CLI:

ng add @ngneat/hot-toast

or with npm:

# For Angular version >= 9.1.13 < 13
npm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3

# For Angular version >= 13 < 15
npm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4

# For Angular version >= 15 <16
npm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5

# For Angular version >= 16 <17
npm install @ngneat/overview@5.1.1 @ngneat/hot-toast@6
</details>

Setup

Styles

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

@use 'node_modules/@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",
],

Standalone Setup

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

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

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

Module Setup

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 {}

Stylings

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",
],

Basic Usage

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({ ... })],
};

Examples

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

ToastConfig

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

NameTypeDescription
reverseOrderbooleanSets the reverse order for hot-toast stacking<br>Default: false
visibleToastsnumberSets the number of toasts visible. 0 will set no limit.<br>Default: 5
stacking"vertical"|"depth"Sets Sets the type of stacking<br>Default: "vertical"

ToastOptions

Configuration used when opening an hot-toast.

NameTypeDescriptionAvailable in global config?
idstringUnique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. <br>ExampleNo
durationnumberDuration in milliseconds after which hot-toast will be auto closed. Can be disabled via autoClose: false<br>Default: 3000, error = 4000, loading = 30000Yes
autoClosebooleanAuto close hot-toast after duration<br>Default: trueYes
positionToastPositionThe position to place the hot-toast.<br>Default: top-center<br>ExampleYes
dismissiblebooleanShow close button in hot-toast<br>Default: false<br>ExampleYes
roleToastRoleRole of the live region.<br>Default: statusYes
ariaLiveToastAriaLivearia-live value for the live region.<br>Default: politeYes
themeToastThemeVisual appearance of hot-toast<br>Default: toast<br>ExampleYes
persist{ToastPersistConfig}Useful when you want to keep a persistance for toast based on ids, across sessions.<br>ExampleNo
iconContentIcon to show in the hot-toast<br>ExampleYes
iconThemeIconThemeUse this to change icon color<br>ExampleYes
classNamestringExtra CSS classes to be added to the hot toast container.Yes
attributesRecord<string, string>Extra attributes to be added to the hot toast container. Can be used for e2e tests.Yes
stylestyle objectExtra styles to apply for hot-toast.<br>ExampleYes
closeStylestyle objectExtra styles to apply for close buttonYes
dataDataTypeAllows you to pass data for your template and component. You can access the data using toastRef.data.<br>Examples: Template with Data, Component with DataNo
injectorInjectorAllows you to pass injector for your component.<br>ExampleNo
groupgroupAllows you to set group options. <br>Examples: Pre-Grouping, Post-GroupingNo

Supported Browsers

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

Accessibility

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.

Breaking Changes

v1 to v2

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.

v2 to v3

None

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/shhdharmen"><img src="https://avatars3.githubusercontent.com/u/6831283?v=4?s=100" width="100px;" alt="Dharmen Shah"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href="https://github.com/ngxpert/hot-toast/commits?author=shhdharmen" title="Code">💻</a> <a href="#content-shhdharmen" title="Content">🖋</a> <a href="#design-shhdharmen" title="Design">🎨</a> <a href="https://github.com/ngxpert/hot-toast/commits?author=shhdharmen" title="Documentation">📖</a> <a href="#example-shhdharmen" title="Examples">💡</a></td> <td align="center" valign="top" width="14.28%"><a href="https://www.netbasal.com/"><img src="https://avatars1.githubusercontent.com/u/6745730?v=4?s=100" width="100px;" alt="Netanel Basal"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href="https://github.com/ngxpert/hot-toast/issues?q=author%3ANetanelBasal" title="Bug reports">🐛</a> <a href="#business-NetanelBasal" title="Business development">💼</a> <a href="#ideas-NetanelBasal" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-NetanelBasal" title="Maintenance">🚧</a> <a href="#mentoring-NetanelBasal" title="Mentoring">🧑‍🏫</a> <a href="#projectManagement-NetanelBasal" title="Project Management">📆</a> <a href="#research-NetanelBasal" title="Research">🔬</a> <a href="https://github.com/ngxpert/hot-toast/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal" title="Reviewed Pull Requests">👀</a></td> <td align="center" valign="top" width="14.28%"><a href="https://timo.sh/"><img src="https://avatars.githubusercontent.com/u/1440854?v=4?s=100" width="100px;" alt="Timo Lins"/><br /><sub><b>Timo Lins</b></sub></a><br /><a href="#design-timolins" title="Design">🎨</a> <a href="#ideas-timolins" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/patdx"><img src="https://avatars.githubusercontent.com/u/353863?v=4?s=100" width="100px;" alt="Patrick Miller"/><br /><sub><b>Patrick Miller</b></sub></a><br /><a href="#maintenance-patdx" title="Maintenance">🚧</a> <a href="#platform-patdx" title="Packaging/porting to new platform">📦</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/ritox842"><img src="https://avatars.githubusercontent.com/u/7280441?v=4?s=100" width="100px;" alt="Gili Yaniv"/><br /><sub><b>Gili Yaniv</b></sub></a><br /><a href="https://github.com/ngxpert/hot-toast/commits?author=ritox842" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@overthesanity"><img src="https://avatars.githubusercontent.com/u/7337691?v=4?s=100" width="100px;" alt="Artur Androsovych"/><br /><sub><b>Artur Androsovych</b></sub></a><br /><a href="#maintenance-arturovt" title="Maintenance">🚧</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/luishcastroc"><img src="https://avatars.githubusercontent.com/u/13698269?v=4?s=100" width="100px;" alt="Luis Castro"/><br /><sub><b>Luis Castro</b></sub></a><br /><a href="https://github.com/ngxpert/hot-toast/commits?author=luishcastroc" title="Code">💻</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

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

<div>Icons made by <a href="http://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>