replacing ng2-toastr with ngx-toastr

Author: aboudard

package-lock.json

@@ -20,8 +20,7 @@
       "prefix": "app",
       "styles": [
         "assets/vendor.scss",
-        "assets/main.scss",
-        "../node_modules/ng2-toastr/ng2-toastr.css"
+        "assets/main.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

src/angular/.angular-cli.json

@@ -30,8 +30,8 @@
     "@ngrx/store-devtools": "^5.2.0",
     "bootstrap": "^4.1.1",
     "core-js": "^2.5.5",
-    "ng2-toastr": "^4.1.2",
-    "ngrx-data": "^1.0.0-beta.11",
+    "ngrx-data": "^1.0.0-beta.13",
+    "ngx-toastr": "^8.4.0",
     "rxjs": "^5.5.10",
     "zone.js": "^0.8.19"
   },

src/angular/package-lock.json

@@ -52,19 +52,29 @@ <h5 class="card-title">Welcome to {{ title }}</h5>
             Todo List with SpringBoot backend and Rest API, NgRx Data store solution for CRUD operations
           </p>
         </div>
-        <ul class="list-group list-group-flush">
-          <li *ngFor="let todo of todos$ | async; let i = index" class="list-group-item"><span [innerText]="todo.title"></span>
-            <button class="float-right btn btn-sm btn-danger" (click)="deleteTodo(todo.id)">
-              <i class="fas fa-trash"></i>
-            </button>
-            <button class="float-right btn btn-sm mr-2" [ngClass]="{'btn-secondary': !todo.active, 'btn-info': todo.active}" (click)="updateTodo(todo)">
-              <span *ngIf="todo.active"><i class="far fa-check-square fa-lg"></i></span>
-              <span *ngIf="!todo.active"><i class="far fa-square fa-lg"></i></span>
-            </button>
-
-          </li>
-
-        </ul>
+        <table class="table table-hover table-bordered">
+          <thead class="thead-light">
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">Title</th>
+            <th>&nbsp;</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr *ngFor="let todo of todos$ | async; let i = index">
+            <th scope="row"><span [innerText]="todo.id"></span></th>
+            <td><span [innerText]="todo.title"></span></td>
+            <td>
+
+              <i class="fas fa-trash float-right text-danger" (click)="deleteTodo(todo.id)"></i>
+              <span *ngIf="todo.active"><i class="float-right far fa-check-square fa-lg text-info mr-2" (click)="updateTodo(todo)"></i></span>
+              <span *ngIf="!todo.active"><i class="float-right far fa-square fa-lg text-secondary mr-2" (click)="updateTodo(todo)"></i></span>
+
+            </td>
+          </tr>
+
+          </tbody>
+        </table>
       </div>
 
       <div class="alert alert-info mt-2">

src/angular/package.json

@@ -4,7 +4,6 @@ import { TodosService } from './services/todos.service';
 import { Todo } from './dto/todo';
 import { Observable } from 'rxjs/Observable';
 import {ToastService} from "./services/toast.service";
-import {ToastsManager} from "ng2-toastr";
 
 @Component({
   selector: 'app-root',
@@ -23,19 +22,15 @@ export class AppComponent implements OnInit {
 
   constructor(
     private todosService: TodosService,
-    private toastService: ToastService,
-    private toastr: ToastsManager,
-    vcr: ViewContainerRef
+    private toastService: ToastService
   ) {
     this.todos$ = todosService.entities$;
-    this.toastr.setRootViewContainerRef(vcr);
   }
   getTodos() {
     this.todosService.getAll();
   }
 
   ngOnInit() {
-
     this.yearNow = new Date().getFullYear().toString();
     this.appVersion = 'V X.X.X';
     this.getTodos();

src/angular/src/app/app.component.html

@@ -1,7 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-import {ToastModule} from 'ng2-toastr/ng2-toastr';
 
 import { AppComponent } from './app.component';
 import { AppStoreModule } from './store/app-store.module';
@@ -10,9 +9,10 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import { CounterComponent } from './counter/counter.component';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import { CountervalidComponent } from './counter/countervalid/countervalid.component';
-import {NoopAnimationsModule} from "@angular/platform-browser/animations";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {CompModule} from "./comp/comp.module";
 import {DirectivesModule} from "./directives/directives.module";
+import {ToastrModule} from "ngx-toastr";
 
 
 @NgModule({
@@ -24,15 +24,15 @@ import {DirectivesModule} from "./directives/directives.module";
   imports: [
     DirectivesModule,
     CompModule,
-    NoopAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
     BrowserModule,
     AppStoreModule,
     ServicesModule,
     NgbModule.forRoot(),
-    ToastModule.forRoot()
+    BrowserAnimationsModule, // required animations module
+    ToastrModule.forRoot(), // ToastrModule added
   ],
   providers: [],
   bootstrap: [AppComponent]

src/angular/src/app/app.component.ts

@@ -1,16 +1,17 @@
 import { Injectable } from '@angular/core';
 import { EntityActions, OP_ERROR, OP_SUCCESS } from 'ngrx-data';
-import {ToastsManager} from "ng2-toastr";
+import {ToastrService} from "ngx-toastr";
 
 @Injectable()
 export class ToastService {
 
-  constructor(actions$: EntityActions, public toastr: ToastsManager) {
+  constructor(actions$: EntityActions, private toastrservice: ToastrService) {
     actions$
       .where(ea => ea.op.endsWith(OP_SUCCESS) || ea.op.endsWith(OP_ERROR))
       // this service never dies so no need to unsubscribe
       .subscribe(action =>
-        this.toastr.success(`${action.entityName} action`, 'Success!')
+        // this is a hack against "expression changed" bug listed here https://github.com/scttcper/ngx-toastr/issues/160
+        setTimeout(() => this.toastrservice.success(`${action.entityName} action`, 'Success!'))
       );
   }
 

src/angular/src/app/app.module.ts

@@ -1,5 +1,11 @@
 @import "variables";
 @import "~bootstrap/scss/bootstrap";
+
+/**
+ngx-toastr
+ */
+@import "~ngx-toastr/toastr-bs4-alert";
+
 /**
 Font Awesome 5
  */