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()],
…Do checkout the library and let us know your feedback. You can reach-out to me at @shhdharmen.
Happy Coding
🌲 🌞 😊
Top comments (4)
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@yooooohetosk1 Did you resolve this?
Did you check the example at ngxpert.github.io/hot-toast/#observe?
This is great!!!