Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from react-hot-toast
- π₯ Hot by default
- β Easy to use
- π Snackbar variation
- βΏ Accessible
- ποΈ Reduce motion support
- π Emoji Support
- π Customizable
- β³ Observable API
- β Pause on hover
- π Events
- π Persistent
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 {}
import { HotToastService } from '@ngneat/hot-toast';
@Component({})
export class AppComponent {
constructor(private toast: HotToastService) {}
showToast() {
this.toast.show('Hello World!');
this.toast.loading('Lazyyy...');
this.toast.success('Yeah!!');
this.toast.warning('Boo!');
this.toast.error('Oh no!');
}
update() {
saveSettings.pipe(
this.toast.observe(
{
loading: 'Saving...',
success: 'Settings saved!',
error: 'Could not save.',
}
)
).subscribe();
}
}
You can pass ToastOptions
while creating the toast to customize the look and behavior:
import { HotToastService } from '@ngneat/hot-toast';
@Component({})
export class AppComponent {
constructor(private toast: HotToastService) {}
customToast() {
this.toast.success('Look at my styles, and I also need more time!', {
duration: 5000,
style: {
border: '1px solid #713200',
padding: '16px',
color: '#713200',
},
iconTheme: {
primary: '#713200',
secondary: '#FFFAEE',
},
});
}
}
You can also set global ToastConfig
options while importing:
import { HotToastModule } from '@ngneat/hot-toast';
@NgModule({
imports: [HotToastModule.forRoot({
reverseOrder: true,
dismissible: true,
autoClose: false
})],
})
class AppModule {}
You can checkout examples at: https://ngneat.github.io/hot-toast#examples.
All options, which are set Available in global config? from ToastOptions
are supported. Below are extra configurable options:
Name | Type | Description |
---|---|---|
reverseOrder | boolean |
Sets the reverse order for hot-toast stacking Default: false |
Configuration used when opening an hot-toast.
Name | Type | Description | Available in global config? |
---|---|---|---|
id | string |
Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |
duration | number |
Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via autoClose: false Default: 3000, error = 4000, loading = 30000 |
Yes |
autoClose | boolean |
Auto close hot-toast after duration Default: true |
Yes |
position | ToastPosition |
The position to place the hot-toast. Default: top-center |
Yes |
dismissible | boolean |
Show close button in hot-toast Default: false |
Yes |
role | ToastRole |
Role of the live region. Default: status |
Yes |
ariaLive | ToastAriaLive |
aria-live value for the live region. Default: polite |
Yes |
theme | ToastTheme |
Visual appearance of hot-toast Default: toast |
Yes |
persist | {ToastPersistConfig} |
Useful when you want to keep a persistance for toast based on ids, across sessions. | No |
icon | Content |
Icon to show in the hot-toast | Yes |
iconTheme | IconTheme |
Use this to change icon color | Yes |
className | string |
Extra CSS classes to be added to the hot toast container. | Yes |
style | style object |
Extra styles to apply for hot-toast | Yes |
closeStyle | style object |
Extra styles to apply for close button | Yes |
Latest versions of Chrome, Edge, Firefox and Safari are supported.
Thanks goes to these wonderful people (emoji key):
Dharmen Shah π» π π¨ π π‘ |
Netanel Basal π πΌ π€ π§ π§βπ« π π¬ π |
This project follows the all-contributors specification. Contributions of any kind welcome!