Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from react-hot-toast
@ngneat/hot-toast | Angular |
---|---|
3.x | >= 9.1.13 < 13 |
4.x | >= 13 < 15 |
5.x | >= 15 |
- ๐ฅ 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:
# For Angular version >= 9.1.13 < 13
npm install @ngneat/[email protected] @ngneat/hot-toast@3
# For Angular version >= 13 < 15
npm install @ngneat/[email protected] @ngneat/hot-toast@4
# For Angular version >= 15
npm install @ngneat/[email protected] @ngneat/hot-toast@5
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!');
this.toast.info('Something...');
}
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. Example |
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 Example |
Yes |
dismissible | boolean |
Show close button in hot-toast Default: false Example |
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 Example |
Yes |
persist | {ToastPersistConfig} |
Useful when you want to keep a persistance for toast based on ids, across sessions. Example |
No |
icon | Content |
Icon to show in the hot-toast Example |
Yes |
iconTheme | IconTheme |
Use this to change icon color Example |
Yes |
className | string |
Extra CSS classes to be added to the hot toast container. | Yes |
attributes | Record<string, string> |
Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |
style | style object |
Extra styles to apply for hot-toast. Example |
Yes |
closeStyle | style object |
Extra styles to apply for close button | Yes |
data | DataType |
Allows you to pass data for your template and component. You can access the data using toastRef.data .Examples: Template with Data, Component with Data |
No |
injector | Injector |
Allows you to pass injector for your component. Example |
No |
Latest versions of Chrome, Edge, Firefox and Safari are supported, with some known issues.
Hot-toast messages are announced via an aria-live
region. By default, the polite
setting is used. While polite
is recommended, this can be customized by setting the ariaLive
property of the ToastConfig
or ToastOptions
.
Focus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.
Hot-toasts that have an action available should be set autoClose: false
, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.
- Content inside
.hot-toast-message
were wrapped intodynamic-content
, now they are wrapped intodiv
>dynamic-view
- Use optional chaining while access
toastRef
in template. E.g.toastRef?.data
- Add
@Optional()
decorator in components' constructor while injecting tokens which are used by toast's injector
For this version you will also need to import the styles from the library like this if you're not using NgAdd
if you use SCSS add this line to your main styles.scss:
@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';
or if you use CSS add this to your styles inside your angular.json:
"styles": [
"node_modules/@ngneat/hot-toast/src/styles/styles.css",
],
Thanks goes to these wonderful people (emoji key):
Dharmen Shah ๐ป ๐ ๐จ ๐ ๐ก |
Netanel Basal ๐ ๐ผ ๐ค ๐ง ๐งโ๐ซ ๐ ๐ฌ ๐ |
Timo Lins ๐จ ๐ค |
Patrick Miller ๐ง ๐ฆ |
Gili Yaniv ๐ป |
Artur Androsovych ๐ง |
Luis Castro ๐ป |
This project follows the all-contributors specification. Contributions of any kind welcome!