Angular Core Deep Dive

Author: Your Name

Diff for: src/app/app.component.html

@@ -7,16 +7,24 @@
 
 <div>
 
-  <div class="courses" *ngIf="courses$ | async as courses">
+  <div class="demo">
 
-    <course-card highlighted *ngFor="let course of courses"
+      <button (click)="onEditCourse()">Edit Course</button>
+
+  </div>
+
+  <div class="courses" *ngIf="courses[0] as course">
+
+    <course-card
                  (courseChanged)="save($event)"
+                 type="beginner"
                  [course]="course">
 
       <course-image [src]="course.iconUrl"></course-image>
 
     </course-card>
 
+
   </div>
 
 

Diff for: src/app/app.component.ts

@@ -1,49 +1,46 @@
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    Inject,
-    InjectionToken,
-    OnInit,
-    Optional,
-    QueryList,
-    ViewChild,
-    ViewChildren
-} from '@angular/core';
-import {COURSES} from '../db-data';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, Inject, OnInit} from '@angular/core';
 import {Course} from './model/course';
-import {CourseCardComponent} from './course-card/course-card.component';
-import {HighlightedDirective} from './directives/highlighted.directive';
 import {Observable} from 'rxjs';
-import {HttpClient, HttpParams} from '@angular/common/http';
 import {CoursesService} from './services/courses.service';
-import {APP_CONFIG, AppConfig, CONFIG_TOKEN} from './config';
+import {AppConfig, CONFIG_TOKEN} from './config';
+import {COURSES} from '../db-data';
 
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css'],
-    providers: [
-        CoursesService
-    ]
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
 
-    courses$: Observable<Course[]>;
+    courses: Course[] = COURSES;
+
 
     constructor(
         private coursesService: CoursesService,
         @Inject(CONFIG_TOKEN) private config: AppConfig) {
 
 
-            console.log(config);
-
     }
 
+
     ngOnInit() {
 
-        this.courses$ = this.coursesService.loadCourses();
+
+
+    }
+
+    onEditCourse() {
+
+        const course = this.courses[0];
+
+        const newCourse = {
+            ...course,
+            description: 'ngOnChanges',
+            cardIndex: 1
+        };
+
+        this.courses[0] = newCourse;
 
     }
 

Diff for: src/app/course-card/course-card.component.html

@@ -9,7 +9,8 @@
 
   <div class="course-description">
 
-    Edit Title: <input #courseTitle [value]="course.description">
+    Edit Title: <input #courseTitle [value]="course.description"
+                       (keyup)="onTitleChanged(courseTitle.value)">
 
   </div>
 

Diff for: src/app/course-card/course-card.component.ts

@@ -1,27 +1,25 @@
 import {
-    AfterContentInit,
-    AfterViewInit,
+    Attribute,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
-    ContentChildren,
-    ElementRef,
-    EventEmitter, Inject,
-    Input,
-    OnInit, Optional,
-    Output,
-    QueryList, Self, SkipSelf,
-    ViewEncapsulation
+    EventEmitter,
+    Input, OnChanges,
+    OnDestroy,
+    OnInit,
+    Output
 } from '@angular/core';
 import {Course} from '../model/course';
-import {CourseImageComponent} from '../course-image/course-image.component';
 import {CoursesService} from '../services/courses.service';
 
 
 @Component({
     selector: 'course-card',
     templateUrl: './course-card.component.html',
-    styleUrls: ['./course-card.component.css']
+    styleUrls: ['./course-card.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CourseCardComponent implements OnInit {
+export class CourseCardComponent implements OnInit, OnDestroy, OnChanges {
 
     @Input()
     course: Course;
@@ -33,12 +31,35 @@ export class CourseCardComponent implements OnInit {
     courseEmitter = new EventEmitter<Course>();
 
 
-    constructor(private coursesService: CoursesService) {
+    constructor(private coursesService: CoursesService,
+                @Attribute('type') private type: string) {
+
+
+        console.log('constructor', this.course);
 
     }
 
+    ngOnChanges(changes) {
+
+        console.log("ngOnChanges", changes);
+    }
+
     ngOnInit() {
 
+        console.log("ngOnInit", this.course);
+
+
+    }
+
+    ngOnDestroy() {
+
+        console.log("ngOnDestroy");
+
+    }
+
+    onTitleChanged(newTitle:string) {
+
+        this.course.description = newTitle;
 
     }