NgRx - The Complete Guide

Author: Your Name

src/app/courses/courses-card-list/courses-card-list.component.ts

@@ -3,6 +3,7 @@ import {Course} from "../model/course";
 import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
 import {EditCourseDialogComponent} from "../edit-course-dialog/edit-course-dialog.component";
 import {defaultDialogConfig} from '../shared/default-dialog-config';
+import {CourseEntityService} from '../services/course-entity.service';
 
 @Component({
     selector: 'courses-card-list',
@@ -18,7 +19,8 @@ export class CoursesCardListComponent implements OnInit {
     courseChanged = new EventEmitter();
 
     constructor(
-      private dialog: MatDialog ) {
+      private dialog: MatDialog,
+      private courseService: CourseEntityService) {
     }
 
     ngOnInit() {
@@ -43,6 +45,12 @@ export class CoursesCardListComponent implements OnInit {
 
   onDeleteCourse(course:Course) {
 
+        this.courseService.delete(course)
+            .subscribe(
+                () => console.log("Delete completed"),
+                err => console.log("Deleted failed", err)
+            );
+
 
   }
 

src/app/courses/courses.module.ts

@@ -49,7 +49,10 @@ export const coursesRoutes: Routes = [
 
 const entityMetadata: EntityMetadataMap = {
     Course: {
-        sortComparer: compareCourses
+        sortComparer: compareCourses,
+        entityDispatcherOptions: {
+            optimisticUpdate: true
+        }
     }
 };
 

src/app/courses/edit-course-dialog/edit-course-dialog.component.ts

@@ -4,6 +4,7 @@ import {Course} from '../model/course';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {CoursesHttpService} from '../services/courses-http.service';
+import {CourseEntityService} from '../services/course-entity.service';
 
 @Component({
   selector: 'course-dialog',
@@ -26,7 +27,7 @@ export class EditCourseDialogComponent {
     private fb: FormBuilder,
     private dialogRef: MatDialogRef<EditCourseDialogComponent>,
     @Inject(MAT_DIALOG_DATA) data,
-    private coursesService: CoursesHttpService) {
+    private coursesService: CourseEntityService) {
 
     this.dialogTitle = data.dialogTitle;
     this.course = data.course;
@@ -63,10 +64,26 @@ export class EditCourseDialogComponent {
       ...this.form.value
     };
 
-    this.coursesService.saveCourse(course.id, course)
-      .subscribe(
-        () => this.dialogRef.close()
-      )
+    if (this.mode == 'update') {
+
+        this.coursesService.update(course);
+
+        this.dialogRef.close();
+    }
+    else if (this.mode == 'create' ) {
+
+        this.coursesService.add(course)
+            .subscribe(
+                newCourse => {
+
+                    console.log("New Course",newCourse);
+
+                    this.dialogRef.close();
+
+                }
+            );
+
+    }
 
 
   }

src/app/courses/home/home.component.html

@@ -14,12 +14,6 @@ <h2 class="title">All Courses</h2>
     <p>In Promo: {{promoTotal$ | async}}</p>
   </div>
 
-  <div class="spinner-container" *ngIf="!(loading$ | async )">
-
-    <mat-spinner></mat-spinner>
-
-  </div>
-
   <mat-tab-group>
 
     <mat-tab label="Beginners">