Angular Core Deep Dive

Author: Your Name

src/app/app.component.html

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

src/app/app.component.ts

@@ -1,4 +1,15 @@
-import {AfterViewInit, Component, ElementRef, Inject, InjectionToken, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    Inject,
+    InjectionToken,
+    OnInit,
+    Optional,
+    QueryList,
+    ViewChild,
+    ViewChildren
+} from '@angular/core';
 import {COURSES} from '../db-data';
 import {Course} from './model/course';
 import {CourseCardComponent} from './course-card/course-card.component';
@@ -12,7 +23,10 @@ import {APP_CONFIG, AppConfig, CONFIG_TOKEN} from './config';
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+    styleUrls: ['./app.component.css'],
+    providers: [
+        CoursesService
+    ]
 })
 export class AppComponent implements OnInit {
 

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

@@ -6,9 +6,9 @@ import {
     ElementRef,
     EventEmitter, Inject,
     Input,
-    OnInit,
+    OnInit, Optional,
     Output,
-    QueryList,
+    QueryList, Self, SkipSelf,
     ViewEncapsulation
 } from '@angular/core';
 import {Course} from '../model/course';

src/app/directives/highlighted.directive.ts

@@ -1,4 +1,5 @@
-import {Directive, EventEmitter, HostBinding, HostListener, Input, Output} from '@angular/core';
+import {Directive, EventEmitter, Host, HostBinding, HostListener, Input, Output} from '@angular/core';
+import {CoursesService} from '../services/courses.service';
 
 @Directive({
     selector: '[highlighted]',
@@ -12,9 +13,9 @@ export class HighlightedDirective {
     @Output()
     toggleHighlight = new EventEmitter();
 
-    constructor() {
+    constructor(private coursesService: CoursesService) {
 
-        console.log('Directive created..');
+        console.log('coursesService highlighted ' + coursesService.id);
 
     }