angular2-toastr

    1.0.6 • Public • Published

    Angular 2 Toastr

    Angular 2 Toastr component is compatible with latest release of Angular 2.X.X for showing alerts and messages for your application.

    Usage

    Follow these steps:

    1. Update your systemjs.config.js file.

    -Add following line in map:

    map: {
          //...
          'angular2-toastr': 'npm:angular2-toastr'
         }

    -and in packages:

    packages: {
          //...
          'angular2-toastr': {
            main: './index.js',
            defaultExtension: 'js'
          }

    2. Update the index.html

    • Import style into your index.html. Choose one of the following files:

      • style-default.css - Contains DEFAULT theme
      • style-bootstrap.css - Contains Bootstrap 3 theme
      • style-material.css - Contains Material Design theme

      OR

    • Copy and Paste :

      • Copy and paste these files in your application.
      • Link them in your index.html

    2. Your Component:

    • Add following tag in template of your component where you intend to use .
    <ng2-toaster [position]=position [theme]=theme ></ng2-toaster>
    • Select the Theme [default, bootstrap, material].

    • Select the Position [top-left, top-right, top-center, bottom-left, bottom-right, bottom-center]

    • Assign them as shown below:

    <ng2-toaster [position]="'top-right'" [theme]="'bootstrap'" ></ng2-toaster>

    3. Import the Components

    Import Components in the NgModule of your application as shown below:

    import {BrowserModule} from "@angular/platform-browser";
    import {NgModule} from '@angular/core';
    import {ToasterComponent, ToastComponent, ToasterAppComponent} from 'angular2-toastr/index';
     
    @NgModule({
        imports: [ BrowserModule ],
        declarations: [ToasterComponent, ToastComponent, ToasterAppComponent]
        bootstrap[AppComponent]
    })
    export class AppModule {
    }

    4. Use the ToasterService for your application

    • Import ToasterService from angular2-toaster in your application code:
    import {Component} from '@angular/core';
    import {ToasterService} from 'angular2-toaster/index';
     
    @Component({
        selector: 'app',
        providers: [ToasterService],
        template: `
            <div>Hello world</div>
            <button (click)="addToast()">Add Toast</button>
            <toaster [position]="'top-right'" [theme]="'bootstrap'" ></toaster>
        `
    })
    export class AppComponent {
        
        constructor(private _toaster: ToasterService) { 
        }
        
        addToast() {
            // See all possible types in one shot.
            // pass parameters as (title:string, message:string, show_close_button:boolean, timeout:number)
            this._toaster.success('title', 'message', true, 1000);
            this._toaster.error('title', 'message', true, 2000);
            this._toaster.info('title', 'message', true, 3000);
            this._toaster.warning('title', 'message', true, 4000);
            this._toaster.wait('title', 'message', true, 0);
        }
    }

    OR

    • Add Service Globally in NgModule :
    import {BrowserModule} from "@angular/platform-browser";
    import {NgModule} from '@angular/core';
    import {ToasterComponent, ToastComponent, ToasterAppComponent, ToasterService} from 'angular2-toastr/index';
     
    @NgModule({
        imports: [ BrowserModule ],
        declarations: [ToasterComponent, ToastComponent, ToasterAppComponent],
        providers: [ToasterService],
        bootstrap: [AppComponent]
    })
    export class AppModule {
    }

    Credits

    Inspired by angular-toasty

    License

    MIT

    Install

    npm i angular2-toastr

    DownloadsWeekly Downloads

    18

    Version

    1.0.6

    License

    MIT

    Last publish

    Collaborators

    • avatar