Angular Core Deep Dive

Author: Your Name

src/app/app.component.html

@@ -5,17 +5,13 @@
 
 </div>
 
-
 <div class="courses">
 
+    <course-card [course]="coreCourse"></course-card>
 
-    <course-card></course-card>
-
-    <course-card></course-card>
-
-    <course-card></course-card>
-
+    <course-card [course]="rxjsCourse"></course-card>
 
+    <course-card [course]="ngrxCourse"></course-card>
 
 </div>
 

src/app/app.component.ts

@@ -9,5 +9,10 @@ import {COURSES} from '../db-data';
 export class AppComponent {
 
 
+    coreCourse = COURSES[0];
+
+    rxjsCourse = COURSES[1];
+
+    ngrxCourse = COURSES[2];
 
 }

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

@@ -1,13 +1,13 @@
 <div class="course-card">
 
     <div class="course-title">
-        Angular Core Deep Dive
+        {{ course.description }}
     </div>
     <img width="300" alt="Angular Logo"
-         src="https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png">
+         [src]="course.iconUrl">
 
     <div class="course-description">
-        A detailed walk-through of the most important part of Angular - the Core and Common modules.
+        {{ course.longDescription }}
     </div>
 
 </div>

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

@@ -1,15 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {COURSES} from '../../db-data';
+import {Course} from '../model/course';
 
 @Component({
-  selector: 'course-card',
-  templateUrl: './course-card.component.html',
-  styleUrls: ['./course-card.component.css']
+    selector: 'course-card',
+    templateUrl: './course-card.component.html',
+    styleUrls: ['./course-card.component.css']
 })
 export class CourseCardComponent implements OnInit {
 
-  constructor() { }
+    @Input()
+    course: Course;
 
-  ngOnInit() {
-  }
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
 
 }