Use ngx-toastr for notifications in account module.

package.json

@@ -69,6 +69,7 @@
     "meanie-angular-storage": "^1.3.1",
     "moment": "^2.18",
     "ngx-restangular": "^1.0.11",
+    "ngx-toastr": "^5.3.1",
     "reflect-metadata": "^0.1.10",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.12"

src/accounts/account.module.ts

@@ -8,6 +8,7 @@ import { HttpModule } from '@angular/http';
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { RestangularModule } from 'ngx-restangular';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrModule } from 'ngx-toastr';
 
 import { AccountService } from './account.service';
 import { AccountBalancesService } from './accountBalances.service';
@@ -22,6 +23,7 @@ import { AccountFormComponent } from './accountForm.component';
     FormsModule,
     NgLoggerModule,
     RestangularModule,
+    ToastrModule,
     NgbModule
   ],
   providers: [

src/accounts/accountList.component.ts

@@ -2,6 +2,7 @@ import { Observable } from 'rxjs/Rx';
 
 import { Logger } from '@nsalaun/ng-logger';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
 
 import { Account } from './account';
 import { AccountBalances } from './accountBalances';
@@ -10,14 +11,20 @@ import { AccountBalancesService } from './accountBalances.service';
 import { AccountDeleteModalComponent } from './accountDeleteModal.component';
 import { AccountEditModalComponent } from './accountEditModal.component';
 export class AccountListComponent {
-    static $inject = ['AccountService', 'AccountBalancesService', 'Notification', 'Logger', 'NgbModal'];
+    static $inject = [
+        'AccountService',
+        'AccountBalancesService',
+        'ToastrService',
+        'Logger',
+        'NgbModal'
+    ];
 
     accounts: Account[];
 
     constructor(
         private AccountService: AccountService,
         private AccountBalancesService: AccountBalancesService,
-        private Notification,
+        private ToastrService: ToastrService,
         private Logger: Logger,
         private NgbModal: NgbModal
     ) {
@@ -93,13 +100,13 @@ export class AccountListComponent {
         }
 
         observable.subscribe(account => {
-            this.Notification.success('Account #' + account.id + ' saved.');
+            this.ToastrService.success('Account #' + account.id + ' saved.');
 
             this.load();
         }, result => {
             this.Logger.error('Error while saving account', account, result);
 
-            this.Notification.error(
+            this.ToastrService.error(
                 'Error while saving account: ' + result.message
             );
         });
@@ -124,13 +131,13 @@ export class AccountListComponent {
         var id = account.id;
 
         this.AccountService.delete(account).subscribe(account => {
-            this.Notification.success('account #' + id + ' deleted.');
+            this.ToastrService.success('account #' + id + ' deleted.');
 
             this.load();
 
             return account;
         }, function(result) {
-            this.Notification.error(
+            this.ToastrService.error(
                 'An error occurred while trying to delete account #' +
                 id + ':<br />' + result
             );

src/accounts/index.ts

@@ -29,6 +29,7 @@ var ngResource       = require('angular-resource'),
 
 import { Logger } from '@nsalaun/ng-logger';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
 
 var accountsTmpl = require('./accounts.html');
 
@@ -43,6 +44,8 @@ export default angular.module('accountant.accounts', [
     ngStrap,
 ])
 
+    .factory('ToastrService', downgradeInjectable(ToastrService))
+
     .factory('Logger', downgradeInjectable(Logger))
 
     .factory('NgbModal', downgradeInjectable(NgbModal))

src/app.module.ts

@@ -12,6 +12,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { NgLoggerModule } from '@nsalaun/ng-logger';
 import { RestangularModule } from 'ngx-restangular';
+import { ToastrModule } from 'ngx-toastr';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AccountModule } from './accounts/account.module';
@@ -36,6 +37,7 @@ import { ApiBaseURL, LogLevel } from './app.config';
         }
       );
     }),
+    ToastrModule.forRoot(),
     NgbModule.forRoot()
   ]
 })

src/main.less

@@ -6,6 +6,8 @@
 
 @import (inline) '~bootstrap-additions/dist/bootstrap-additions.css';
 
+@import (inline) '~ngx-toastr/toastr.css';
+
 .italic {
     font-style: italic;
 }