Lightweight, customizable toast notifications for Angular 20+. A modern replacement for toastr with Angular Material design and flexible APIs.
npm install ngx-toastr-notifier---
> Notice:
> This library uses @angular/material as a dependency and install it automatically in node_modules.
>
> By utilizing Angular Material, we enhance maintainability and ensure better compatibility with future releases, particularly when relying on components like SnackBar.
Latest version available for each version of Angular
| ngx-toastr-notifier | Angular | @angular/material |
| ------------------- | ------- | ----------------- |
| ^21.0.9 (current) | ^21.x | ^21.x |
| ^20.0.8 | ^20.x | ^20.x |
| ^19.0.4 | ^19.x | ^19.x |
Use npm:
``bash`
npm install ngx-toastr-notifier
Use pnpm
`bash`
pnpm add ngx-toastr-notifier
Toastr usage is very simple, by default it comes with four types of notification messages:
show:
`typescript
import { Component } from '@angular/core';
import { ToastService } from 'ngx-toastr-notifier';
@Component({
selector: 'app-demo',
template:
})
export class DemoComponent {
constructor(private toastr: ToastService) {}
showToast() {
this.toastr.show('success', 'This is a toast message!', 'Toast');
}
}
`
Success:
`typescript
import { ToastService } from 'ngx-toastr-notifier';
@Component({...})
export class DemoComponent {
constructor(private toastr: ToastService) {}
showSuccess() {
this.toastr.success('Hello world!', 'Toastr fun!');
}
}
`
Info:
`typescript
import { ToastService } from 'ngx-toastr-notifier';
@Component({...})
export class DemoComponent {
constructor(private toastr: ToastService) {}
showSuccess() {
this.toastr.info('We are open today from 10 to 22', 'Information');
}
}
`
Error:
`typescript
import { ToastService } from 'ngx-toastr-notifier';
@Component({...})
export class DemoComponent {
constructor(private toastr: ToastService) {}
showSuccess() {
this.toastr.error("Yo're not authorized", 'Error');
}
}
`
Warning:
`typescript
import { ToastService } from 'ngx-toastr-notifier';
@Component({...})
export class DemoComponent {
constructor(private toastr: ToastService) {}
showSuccess() {
this.toastr.warning("You're Computer is overheated", "Warning");
}
}
`
| Option | Type | Default | Description |
| ------------------ | ----------------------------- | ------- | ------------------------------------------------------------ |
| type | ToastType | info | The type of toastr can be one of these values 'success' \| 'info' \| 'warning' \| 'error' |
| duration | number | 2000 | The length of time in milliseconds to wait before automatically dismissing the toastr. |
| showClose | boolean | true | The close button to be appeared or not |
| progressBar | boolean | false | The progress bar to be appeared or not |
| horizontalPosition | MatSnackBarHorizontalPosition | right | The horizontal position to place the toastr. |
| verticalPosition | MatSnackBarVerticalPosition | top | The vertical position to place the toastr. |
| Direction | Direction | ltr | Text layout direction for the toastr |
use it to display a toast with a custom duration, showClose set to false, and horizontal position set to left.
`typescript
import { Component } from '@angular/core';
import { ToastService } from 'ngx-toastr-notifier';
@Component({
selector: 'app-demo',
template:
})
export class DemoComponent {
constructor(private toastr: ToastService) {}
showToast() {
this.toastr.success('This is a toast message!', 'Toast' {
duration: 5000, // Duration in milliseconds
showClose: false, // Hide the close button
horizontalPosition: 'center' // Position toast to the center
});
}
}
`
ngx-toastr-notifier is available under the MIT license. See the LICENSE file for more info.
We are open to any contributions and feed backs.
To build the library, run:
`bash`
npx @angular/cli@21 build ngx-toastr-notifier
This command will compile your project, and the build artifacts will be placed in the dist/` directory.