DEV Community

loading...
Cover image for πŸŽ‰ Announcing Angular Hot Toast β€” The Best Angular Toast in Town

πŸŽ‰ Announcing Angular Hot Toast β€” The Best Angular Toast in Town

shhdharmen profile image Dharmen Shah ・2 min read

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

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:

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

Basic Usage

import { HotToastService } from '@ngneat/hot-toast';
@Component({})
export class AppComponent {
  constructor(private toast: HotToastService
…
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

🌲 🌞 😊

Discussion (1)

pic
Editor guide
Collapse
sebastiandg7 profile image
SebastiΓ‘n Duque G

This is great!!!