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.

Compatibility with Angular Versions

Latest version available for each version of Angular

ngx-toastr-notifier	Angular	@angular/material
^20.0.8 (current)	^20.x	^20.x
^19.0.4	^19.x	^19.x

Install

Use npm:

npm install ngx-toastr-notifier

Use pnpm

pnpm add ngx-toastr-notifier

Usage

Toastr usage is very simple, by default it comes with four types of notification messages:

show:

import { Component } from '@angular/core';
import { ToastService } from 'ngx-toastr-notifier';

@Component({
  selector: 'app-demo',
  template: `<button (click)="showToast()">Show Toast</button>`
})
export class DemoComponent {
  constructor(private toastr: ToastService) {}

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

Success:

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

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

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

Info:

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:

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

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

  showSuccess() {
    this.toastr.error("Yo're not authorized", 'Error');
  }
}

Warning:

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

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

  showSuccess() {
    this.toastr.warning("You're Computer is overheated", "Warning");
  }
}

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.

import { Component } from '@angular/core';
import { ToastService } from 'ngx-toastr-notifier';

@Component({
  selector: 'app-demo',
  template: `<button (click)="showToast()">Show Toast</button>`
})
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
    });
  }
}

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:

npx @angular/cli@20 build ngx-toastr-notifier

This command will compile your project, and the build artifacts will be placed in the dist/ directory.

Keywords

ngx-toastr-notifier