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