DEV Community

Cover image for 🎉 Announcing Angular Hot Toast — The Best Angular Toast in Town
Dharmen Shah
Dharmen Shah

Posted on

🎉 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

header 2 (4).gif

Getting Started

You can install it through Angular CLI:

ng add @ngneat/hot-toast
Enter fullscreen mode Exit fullscreen mode

or with npm:

npm install @ngneat/overview @ngneat/hot-toast
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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!');
  }
}
Enter fullscreen mode Exit fullscreen mode

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()
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Repo

GitHub logo ngneat / hot-toast

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


npm MIT commitizen PRs styled with prettier styled with prettier All Contributors ngneat cypress semantic-release

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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()],
Enter fullscreen mode Exit fullscreen mode

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

Happy Coding

🌲 🌞 😊

Top comments (4)

Collapse
 
yooooohetosk1 profile image
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

Collapse
 
ediri_aghwotu profile image
Aghwotu Ovuoke

@yooooohetosk1 Did you resolve this?

Collapse
 
shhdharmen profile image
Dharmen Shah

Did you check the example at ngxpert.github.io/hot-toast/#observe?

Collapse
 
sebastiandg7 profile image
Sebastián Duque G

This is great!!!