Angular Core Deep Dive

Your Name · Your Name · commit 58a1e99bb100 · 2018-09-03T16:40:52.000+02:00
diff --git a/src/app/course-card/course-card.component.css b/src/app/course-card/course-card.component.css
@@ -0,0 +1,7 @@
+
+
+
+.course-card.beginner {
+
+    background: lightsalmon;
+}
diff --git a/src/app/course-card/course-card.component.html b/src/app/course-card/course-card.component.html
@@ -1,4 +1,5 @@
-<div class="course-card" *ngIf="course">
+<div class="course-card" *ngIf="course"
+    [ngClass]="cardClasses()">
 
     <div class="course-title">
         {{ cardIndex + ' ' + course.description }}
diff --git a/src/app/course-card/course-card.component.ts b/src/app/course-card/course-card.component.ts
@@ -30,10 +30,17 @@ export class CourseCardComponent implements OnInit {
 
     onCourseViewed() {
 
-        console.log("card component - button clicked ...");
+        console.log('card component - button clicked ...');
 
         this.courseEmitter.emit(this.course);
 
     }
 
+    cardClasses() {
+        if (this.course.category == 'BEGINNER') {
+            return 'beginner';
+        }
+    }
+
+
 }
diff --git a/src/db-data.ts b/src/db-data.ts
@@ -2,11 +2,10 @@
 
 export const COURSES: any = [
 
-    undefined,
-
     {
         id: 1,
         description: "Angular Core Deep Dive",
+        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png',
         longDescription: "A detailed walk-through of the most important part of Angular - the Core and Common modules",
         category: 'ADVANCED',
         lessonsCount: 10

-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
++
++
++
 +.course-card.beginner {
++
 +    background: lightsalmon;
 +}
Original file line number	Diff line number	Diff line change
`@@ -30,10 +30,17 @@ export class CourseCardComponent implements OnInit {`
`30`	`30`
`31`	`31`	`onCourseViewed() {`
`32`	`32`
`33`		`- console.log("card component - button clicked ...");`
	`33`	`+ console.log('card component - button clicked ...');`
`34`	`34`
`35`	`35`	`this.courseEmitter.emit(this.course);`
`36`	`36`
`37`	`37`	`}`
`38`	`38`
	`39`	`+ cardClasses() {`
	`40`	`+ if (this.course.category == 'BEGINNER') {`
	`41`	`+ return 'beginner';`
	`42`	`+ }`
	`43`	`+ }`
	`44`	`+`
	`45`	`+`
`39`	`46`	`}`