Angular Core Deep Dive

Author: jhades

src/app/app.component.html

@@ -7,15 +7,12 @@
 
 <div>
 
-  <div class="courses" *ngIf="courses$ | async as courses">
+  <div class="courses">
 
-    <course-card *ngFor="let course of courses" (courseChanged)="saveCourse($event)"
+    <course-card *ngFor="let course of courses"
                  [course]="course">
 
-      <course-image [src]="course.iconUrl"
-                    *ngxUnless="!course.iconUrl">
-
-      </course-image>
+      <course-image [src]="course.iconUrl"></course-image>
 
     </course-card>
 

src/app/app.component.ts

@@ -3,7 +3,6 @@ import {COURSES} from '../db-data';
 import {Course} from './model/course';
 import {CourseCardComponent} from './course-card/course-card.component';
 import {HighlightedDirective} from './directives/highlighted.directive';
-import {CoursesService} from './services/courses.service';
 import {Observable} from 'rxjs';
 
 @Component({
@@ -14,34 +13,15 @@ import {Observable} from 'rxjs';
 export class AppComponent implements OnInit {
 
 
-  courses$: Observable<Course[]>;
+  courses = COURSES;
 
-
-
-  constructor(private coursesService: CoursesService) {
+  constructor() {
 
   }
 
   ngOnInit() {
-    this.courses$ = this.coursesService.loadCourses();
   }
 
-  onToggle(isHighlighted: boolean) {
-
-    console.log(isHighlighted);
-
-  }
 
-  saveCourse(course: Course) {
-
-    console.log('new course', course);
-
-    this.coursesService.saveCourse(course)
-      .subscribe(
-        () => console.log('Course Saved!'),
-        console.error
-      );
-
-  }
 
 }

src/app/app.module.ts

@@ -7,7 +7,7 @@ import { CourseCardComponent } from './course-card/course-card.component';
 import { CourseImageComponent } from './course-image/course-image.component';
 import { HighlightedDirective } from './directives/highlighted.directive';
 import { NgxUnlessDirective } from './directives/ngx-unless.directive';
-import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [