ngx-toastr-notifier

!success_progress_bar.png

---

> 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.

Compatibility with Angular Versions

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 |

Install

Use npm:

``bash
npm install ngx-toastr-notifier
`

Use pnpm

`bash
pnpm add ngx-toastr-notifier
`

Usage

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: Show Toast
})
export class DemoComponent {
constructor(private toastr: ToastService) {}

showToast() {
this.toastr.show('success', 'This is a toast message!', 'Toast');
}
}
`

!success.png

Success:

`typescript
import { ToastService } from 'ngx-toastr-notifier';

@Component({...})
export class DemoComponent {
constructor(private toastr: ToastService) {}

showSuccess() {
this.toastr.success('Hello world!', 'Toastr fun!');
}
}
`

!success2.png

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');
}
}
`

!info.png

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');
}
}
`

!error.png

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");
}
}
`

!warning.png

Options

| 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 |

Example of Usage with Options

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: Show Toast
})
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
});
}
}
`

!success.png

License

ngx-toastr-notifier is available under the MIT license. See the LICENSE file for more info.

Contributors

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.

$3

ngx-toastr-notifier