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:

$3

-Add following line in map:

``js
map: {
//...
'angular2-toastr': 'npm:angular2-toastr'
}
`
-and in packages:

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

$3

- 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

$3

- Add following tag in template of your component where you intend to use .

`ts

`

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

`ts

`




$3

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

`ts
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 {
}
`

$3


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

`ts
import {Component} from '@angular/core';
import {ToasterService} from 'angular2-toaster/index';

@Component({
selector: 'app',
providers: [ToasterService],
template:

Add Toast


})
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 :
`ts
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