Angular Core Deep Dive

Author: jhades

server/get-courses.route.ts

@@ -5,7 +5,7 @@ import {COURSES} from '../src/db-data';
 export function getAllCourses(req: Request, res: Response) {
 
 
-    res.status(200).json({payload: Object.values(COURSES)});
+    res.status(200).json(Object.values(COURSES));
 
 
 }
@@ -20,4 +20,4 @@ export function getCourseById(req: Request, res: Response) {
     const course = courses.find(course => course.id == courseId);
 
     res.status(200).json(course);
-}
+}

src/app/app.component.html

@@ -7,7 +7,7 @@
 
 <div>
 
-  <div class="courses">
+  <div class="courses" *ngIf="courses$ | async as courses">
 
     <course-card *ngFor="let course of courses" (courseChanged)="saveCourse($event)"
                  [course]="course">

src/app/app.component.ts

@@ -11,45 +11,37 @@ import {Observable} from 'rxjs';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements AfterViewInit, OnInit {
+export class AppComponent implements OnInit {
 
-    courses = COURSES;
 
-    @ViewChild(CourseCardComponent, {read:HighlightedDirective})
-    highlighted: HighlightedDirective;
+  courses$: Observable<Course[]>;
 
-    @ViewChildren(CourseCardComponent, {read: ElementRef})
-    cards : QueryList<ElementRef>;
 
-    courses$: Observable<Course[]>;
 
+  constructor(private coursesService: CoursesService) {
 
-    constructor(private coursesService: CoursesService) {
+  }
 
-    }
+  ngOnInit() {
+    this.courses$ = this.coursesService.loadCourses();
+  }
 
-    ngOnInit() {
-      this.courses$ =  this.coursesService.loadCourses();
-    }
+  onToggle(isHighlighted: boolean) {
 
-    onToggle(isHighlighted:boolean) {
+    console.log(isHighlighted);
 
-        console.log(isHighlighted);
+  }
 
-    }
+  saveCourse(course: Course) {
 
+    console.log('new course', course);
 
-    ngAfterViewInit() {
+    this.coursesService.saveCourse(course)
+      .subscribe(
+        () => console.log('Course Saved!'),
+        console.error
+      );
 
-        console.log(this.highlighted);
-
-
-    }
-
-    saveCourse(course:Course) {
-
-      console.log('new course', course);
-
-    }
+  }
 
 }

src/app/course-card/course-card.component.ts

@@ -19,7 +19,7 @@ import {CourseImageComponent} from '../course-image/course-image.component';
     templateUrl: './course-card.component.html',
     styleUrls: ['./course-card.component.css']
 })
-export class CourseCardComponent implements OnInit, AfterViewInit, AfterContentInit {
+export class CourseCardComponent implements OnInit {
 
     @Input()
     course: Course;
@@ -30,47 +30,22 @@ export class CourseCardComponent implements OnInit, AfterViewInit, AfterContentI
     @Output('courseChanged')
     courseEmitter = new EventEmitter<Course>();
 
-    @ContentChildren(CourseImageComponent, {read: ElementRef})
-    images: QueryList<ElementRef>;
 
     constructor() {
 
     }
 
-    ngAfterViewInit() {
-
-    }
-
-    ngAfterContentInit() {
-
-    }
-
     ngOnInit() {
 
     }
 
-    isImageVisible() {
-        return this.course && this.course.iconUrl;
-    }
 
     onSaveClicked(description:string) {
 
         this.courseEmitter.emit({...this.course, description});
 
     }
 
-    cardClasses() {
-        if (this.course.category == 'BEGINNER') {
-            return 'beginner';
-        }
-    }
-
-    cardStyles() {
-        return {
-            'background-image': 'url(' + this.course.iconUrl + ')'
-
-        };
-    }
 
 
 

src/app/services/courses.service.ts

@@ -1,6 +1,7 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {Course} from '../model/course';
+import {map} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -16,4 +17,8 @@ export class CoursesService {
     return this.http.get<Course[]>('/api/courses');
   }
 
+  saveCourse(course: Course) {
+    return this.http.put(`/api/courses/${course.id}`, course);
+  }
+
 }

src/db-data.ts

@@ -83,5 +83,5 @@ export const COURSES: any = [
 
 
 export function findCourseById(courseId:number) {
-    return COURSES.find(course => course.id === courseId);
-}
+    return COURSES.find(course => course.id == courseId);
+}