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.
Follow these steps:
1. Update your
-Add following line in map:
-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
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 =theme /ng2-toaster
Select the Theme [
Select the Position [
Assign them as shown below:
ng2-toaster ="'top-right'" ="'bootstrap'" /ng2-toaster
3. Import the
Import Components in the NgModule of your application as shown below:
4. Use the
ToasterService for your application
angular2-toasterin your application code:
- Add Service Globally in NgModule :
Inspired by angular-toasty