🎉 Announcing Angular Hot Toast — The Best Angular Toast in Town

A few weeks ago Netanel Basal came up with an idea to create react-hot-toast like library for Angular community.

And I am really glad that we ended up creating the best Angular toast in town, announcing...

# 🎉 Angular Hot Toast — The Best Angular Toast in Town

Getting Started

You can install it through Angular CLI:

ng add @ngneat/hot-toast

or with npm:

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

When you install using npm or yarn, you will also need to import HotToastModule in your app.module. You can also set global toast options (Partial<ToastConfig>) here.:

import { HotToastModule } from '@ngneat/hot-toast';

@NgModule({
  imports: [HotToastModule.forRoot()],
})
class AppModule {}

Features

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

Here are some basic examples:

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

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

  showToast() {
    this.toast.show('👋 Hello World!');
    this.toast.success('👍 Yeah!!');
    this.toast.warning('🧐 Boo!');
    this.toast.error('😭 Oh no!');
  }
}

A common task is to show a success or error toasts based on the server response. To make your life easier, we created a custom operator that will do the work for you:

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

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

  update() {
    this.usersService.updateUser().pipe(
      this.toast.observe({
         loading: 'Updating...',
         success: '🚀',
         error: '😡'
      })
    ).subcribe()
  }
}

Checkout more examples at: https://ngneat.github.io/hot-toast/

Repo

ngneat / hot-toast

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

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

Compatibility with Angular Versions

@ngneat/hot-toast	Angular
3.x	>= 9.1.13 < 13
4.x	>= 13

Features

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

Installation

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
npm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4

When you install using npm or yarn, you will also need to import HotToastModule in your app.module. You can also set global toast options (Partial<ToastConfig>) here.:

import { HotToastModule } from '@ngneat/hot-toast';
@NgModule({
  imports: [HotToastModule.forRoot()],

…

View on GitHub

---

Do checkout the library and let us know your feedback. You can reach-out to me at @shhdharmen.

Happy Coding

🌲 🌞 😊

Comments

[Het]

dude i have a question i am using toast by using the this.toast.observe method and the toast are displaying successfully but the problem is they are staying there permanently how do i make them move away

[Sebastián Duque G]

This is great!!!