toastr-ng2

DEMO: https://scttcper.github.io/toastr-ng2/

Features

• No use of *ngFor. Fewer dirty checks and higher performance.
• Component inheritance for custom toasts
• angular-cli AoT compilation and lazy loading compatible
• SystemJS rollup bundle
• Automatic Toast component injection based on @angular2-material/core/overlay
• Animations using angular 2's Web Animations API (pollyfill needed for older devices)
• Target a specific directive with toasts

Install

1npm install toastr-ng2 --save

Setup

step 1: copy toast css to your project. If you are using sass you can import the css.

1@import 'node_modules/toastr-ng2/toastr';

If you are using angular-cli you can add it to your angular-cli.json

"styles": [
  "styles.scss",
  "node_modules/toastr-ng2/toastr.css"
]

step 2: add ToastrModule to app NgModule

1import { ToastrModule } from 'toastr-ng2';
2import { CommonModule } from '@angular/common';
3
4@NgModule({
5  imports: [
6    CommonModule,
7    ToastrModule.forRoot(), // ToastrModule added
8  ], 
9  bootstrap: [App],
10  declarations: [App],
11})
12class MainModule {}

Use

Success:

1import { ToastrService } from 'toastr-ng2';
2@Component({
3  ...
4})
5export class YourComponent {
6  constructor(private toastrService: ToastrService) {}
7  
8  showSuccess() {
9    this.toastrService.success('Hello world!', 'Toastr fun!');
10  }
11}

Options

There's global options and individual toast options. All individual toast options are included in the global options. See file toastr-config.ts The toastComponent can be inherited and modified. See the pink toast in the demo. It has a different animation and inline style.

ToastrConfig (Global Options)

1maxOpened: number = 0; // max toasts opened. Toasts will be queued
2autoDismiss: boolean = false; // dismiss current toast when max is reached
3iconClasses = { // classes used on toastr service methods
4  error: 'toast-error',
5  info: 'toast-info',
6  success: 'toast-success',
7  warning: 'toast-warning',
8};
9newestOnTop: boolean = true; // new toast placement
10preventDuplicates: boolean = false; // block duplicate messages

ToastConfig (Individual Toast options)

1toastComponent = Toast; // the angular 2 component that will be used
2closeButton: boolean = false; // show close button
3timeOut: number = 5000; // time to live
4enableHtml: boolean = false; // allow html in message. (UNSAFE)
5extendedTimeOut: number = 1000; // time to close after a user hovers over toast
6progressBar: boolean = false; // show progress bar
7toastClass: string = 'toast'; // class on toast
8positionClass: string = 'toast-top-right'; // class on toast
9titleClass: string = 'toast-title'; // class inside toast on title
10messageClass: string = 'toast-message'; // class inside toast on message
11tapToDismiss: boolean = true; // close on click
12onActivateTick: boolean = false; // fire a ApplicationRef.tick() from the toast component when activated. Might help show the toast if you are firing it from a websocket

Override default settings

NEW FOR VERSION > 3 Option 1: Pass values to ToastrModule.forRoot

1// your NgModule
2imports: [
3  ToastrModule.forRoot({timeOut: 0}),
4], 

Option 2: Inject ToastrConfig, typically in your root component, and customize the values.

1import { ToastrConfig } from 'toastr-ng2';
2import { Component } from '@angular/core';
3
4@Component({
5  selector: 'app-root',
6  templateUrl: './app.component.html',
7  styleUrls: ['./app.component.css']
8})
9export class AppComponent {
10  constructor(toastrConfig: ToastrConfig) {
11    toastrConfig.timeOut = 100;
12  }
13}

individual toast settings

success, error, info, warning take (message, title, ToastConfig) pass a ToastConfig object to replace several default settings.

1// OPTIONAL: import the ToastConfig interface
2import { ToastConfig } from 'toastr-ng2';
3
4const errorConfig: ToastConfig = {timeOut: 10000};
5this.toastrService.error('everything is broken', 'title is optional', errorConfig);

Toastr Service methods return:

1export interface ActiveToast {
2  toastId: number; // Your Toast ID. Use this to close it individually
3  message: string; // the message of your toast. Stored for prevent duplicate reasons
4  portal?: any; // a reference to the component see portal.ts
5  toastRef?: ToastRef<any>;  // a reference to your toast
6  onShown?: Observable<any>; // triggered when toast is active
7  onHidden?: Observable<any>; // triggered when toast is destroyed
8  onTap?: Observable<any>; // triggered on click
9}

Toastr Service will return undefined if prevent duplicates is on.

Put toasts in your own container

Put toasts in a specific div inside your application. This should probably be somewhere that doesn't get deleted. Add ToastContainerModule.forRoot() to ngModule after the ToastrModule.forRoot() Add a div with toastContainer directive on it.

import { ToastContainerDirective } from 'toastr-ng2';
@Component({
  selector: 'app-root',
  template: `<div toastContainer class="toast-top-right"></div>`,
})
export class AppComponent implements OnInit {

  @ViewChild(ToastContainerDirective) toastContainer: ToastContainerDirective;

  constructor(private toastrService: ToastrService) {}
  ngOnInit() {
    this.toastrService.overlayContainer = this.toastContainer;
    this.toastrService.success('in div');
  }
}

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for toastr-ng2:

1map: {
2  'toastr-ng2': 'node_modules/toastr-ng2/toastr.umd.js',
3}

Previous Works

angular-toastr and the original toastr.

License

MIT