๐ŸŽ‰ 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:

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 () here.:

typescript
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

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

Happy Coding

๐ŸŒฒ ๐ŸŒž ๐Ÿ˜Š

Originally published at https://blog.shhdharmen.me on February 2, 2021.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store