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:

1map: {
2      //...
3      'angular2-toastr': 'npm:angular2-toastr'
4     }

-and in packages:

1packages: {
2      //...
3      'angular2-toastr': {
4        main: './index.js',
5        defaultExtension: 'js'
6      }

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 .

1<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:

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

3. Import the Components

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

1import {BrowserModule} from "@angular/platform-browser";
2import {NgModule} from '@angular/core';
3import {ToasterComponent, ToastComponent, ToasterAppComponent} from 'angular2-toastr/index';
4
5@NgModule({
6    imports: [ BrowserModule ],
7    declarations: [ToasterComponent, ToastComponent, ToasterAppComponent]
8    bootstrap: [AppComponent]
9})
10export class AppModule {
11}

4. Use the ToasterService for your application

• Import ToasterService from angular2-toaster in your application code:

1import {Component} from '@angular/core';
2import {ToasterService} from 'angular2-toaster/index';
3
4@Component({
5    selector: 'app',
6    providers: [ToasterService],
7    template: `
8        <div>Hello world</div>
9        <button (click)="addToast()">Add Toast</button>
10        <toaster [position]="'top-right'" [theme]="'bootstrap'" ></toaster>
11    `
12})
13export class AppComponent {
14    
15    constructor(private _toaster: ToasterService) { 
16    }
17    
18    addToast() {
19        // See all possible types in one shot.
20        // pass parameters as (title:string, message:string, show_close_button:boolean, timeout:number)
21        this._toaster.success('title', 'message', true, 1000);
22        this._toaster.error('title', 'message', true, 2000);
23        this._toaster.info('title', 'message', true, 3000);
24        this._toaster.warning('title', 'message', true, 4000);
25        this._toaster.wait('title', 'message', true, 0);
26    }
27}

OR

• Add Service Globally in NgModule :

1import {BrowserModule} from "@angular/platform-browser";
2import {NgModule} from '@angular/core';
3import {ToasterComponent, ToastComponent, ToasterAppComponent, ToasterService} from 'angular2-toastr/index';
4
5@NgModule({
6    imports: [ BrowserModule ],
7    declarations: [ToasterComponent, ToastComponent, ToasterAppComponent],
8    providers: [ToasterService],
9    bootstrap: [AppComponent]
10})
11export class AppModule {
12}

Credits

Inspired by angular-toasty

License

MIT