npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ngxpert/hot-toast

v4.1.1

Published

Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.

Downloads

13,629

Readme

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

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

Features

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

Installation

Angular 19+

Using Angular CLI:

ng add @ngxpert/hot-toast

Other Angular Versions

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

Setup

Step 1a/2: Standalone Setup

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

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

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

Step 1b/2: 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 {}

Step 2/2: 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:

| Name | Type | Description | | ------------- | --------------------- | ----------------------------------------------------------------------- | | reverseOrder | boolean | Sets the reverse order for hot-toast stackingDefault: false | | visibleToasts | number | Sets the number of toasts visible. 0 will set no limit.Default: 5 | | stacking | "vertical"\|"depth" | Sets Sets the type of stackingDefault: "vertical" |

ToastOptions

Configuration used when opening an hot-toast.

| Name | Type | Description | Available in global config? | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | | id | string | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. Example | No | | duration | number | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via autoClose: falseDefault: 3000, error = 4000, loading = 30000 | Yes | | autoClose | boolean | Auto close hot-toast after durationDefault: true | Yes | | position | ToastPosition | The position to place the hot-toast.Default: top-centerExample | Yes | | dismissible | boolean | Show close button in hot-toastDefault: falseExample | Yes | | role | ToastRole | Role of the live region.Default: status | Yes | | ariaLive | ToastAriaLive | aria-live value for the live region.Default: polite | Yes | | theme | ToastTheme | Visual appearance of hot-toastDefault: toastExample | Yes | | persist | {ToastPersistConfig} | Useful when you want to keep a persistance for toast based on ids, across sessions.Example | No | | icon | Content | Icon to show in the hot-toastExample | Yes | | iconTheme | IconTheme | Use this to change icon colorExample | Yes | | className | string | Extra CSS classes to be added to the hot toast container. | Yes | | attributes | Record<string, string> | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes | | style | style object | Extra styles to apply for hot-toast.Example | Yes | | closeStyle | style object | Extra styles to apply for close button | Yes | | data | DataType | Allows you to pass data for your template and component. You can access the data using toastRef.data.Examples: Template with Data, Component with Data | No | | injector | Injector | Allows you to pass injector for your component.Example | No | | group | group | Allows you to set group options. Examples: Pre-Grouping, Post-Grouping | No |


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):

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