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

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

Getting Started

npm install @ngneat/overview @ngneat/hot-toast
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!');
}
}
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()
}
}

Repo

--

--

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