This package has been deprecated

    Author message:

    use ngx-toastr

    toastr-ng2
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.1 • Public • Published

    toastr-ng2

    NPM version build status coverage status

    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

    npm install toastr-ng2 --save

    Setup

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

    @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

    import { ToastrModule } from 'toastr-ng2';
    import { CommonModule } from '@angular/common';
     
    @NgModule({
      imports: [
        CommonModule,
        ToastrModule.forRoot(), // ToastrModule added
      ], 
      bootstrap: [App],
      declarations: [App],
    })
    class MainModule {}

    Use

    Success:

    import { ToastrService } from 'toastr-ng2';
    @Component({
      ...
    })
    export class YourComponent {
      constructor(private toastrService: ToastrService) {}
      
      showSuccess() {
        this.toastrService.success('Hello world!', 'Toastr fun!');
      }
    }

    success

    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)

    maxOpenednumber = 0; // max toasts opened. Toasts will be queued
    autoDismissboolean = false; // dismiss current toast when max is reached
    iconClasses = { // classes used on toastr service methods
      error: 'toast-error',
      info: 'toast-info',
      success: 'toast-success',
      warning: 'toast-warning',
    };
    newestOnTopboolean = true; // new toast placement
    preventDuplicatesboolean = false; // block duplicate messages

    ToastConfig (Individual Toast options)

    toastComponent = Toast; // the angular 2 component that will be used
    closeButtonboolean = false; // show close button
    timeOutnumber = 5000; // time to live
    enableHtmlboolean = false; // allow html in message. (UNSAFE)
    extendedTimeOutnumber = 1000; // time to close after a user hovers over toast
    progressBarboolean = false; // show progress bar
    toastClassstring = 'toast'; // class on toast
    positionClassstring = 'toast-top-right'; // class on toast
    titleClassstring = 'toast-title'; // class inside toast on title
    messageClassstring = 'toast-message'; // class inside toast on message
    tapToDismissboolean = true; // close on click
    onActivateTickboolean = 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

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

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

    import { ToastrConfig } from 'toastr-ng2';
    import { Component } from '@angular/core';
     
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      constructor(toastrConfig: ToastrConfig) {
        toastrConfig.timeOut = 100;
      }
    }

    individual toast settings

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

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

    Toastr Service methods return:

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

    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:

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

    Previous Works

    angular-toastr and the original toastr.

    License

    MIT

    Install

    npm i toastr-ng2

    DownloadsWeekly Downloads

    49

    Version

    4.1.1

    License

    MIT

    Last publish

    Collaborators

    • scttcper