Angular Core Deep Dive

Author: jhades

src/app/app.component.html

@@ -1,44 +1,30 @@
 <div class="top-menu">
 
-    <img class="logo"
-         src="https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png">
+  <img class="logo"
+       src="https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png">
 
 </div>
 
-<div class="salmon-theme">
+<div>
 
-    <div class="course-card">
+  <div class="courses">
 
-        Test Card
+    <course-card *ngFor="let course of courses" (courseSelected)="onCourseSelected($event)"
+                 [course]="course">
 
-    </div>
 
-    <ng-template [ngIf]="courses[0]" let-course>
+      <course-image [src]="course.iconUrl"
+                    *ngxUnless="!course.iconUrl">
 
-        <div class="courses">
+      </course-image>
 
-            <course-card highlighted #highlighter="hl"
-                         (toggleHighlight)="onToggle($event)"
-                         (courseSelected)="onCourseSelected($event)"
-                         [course]="course">
+      <div class="course-description">
+        {{ course.longDescription }}
+      </div>
 
+    </course-card>
 
-                <course-image [src]="course.iconUrl"
-                              *ngxUnless="!course.iconUrl">
-
-                </course-image>
-
-
-                <div class="course-description"
-                     (dblclick)="highlighter.toggle()" >
-                    {{ course.longDescription }}
-                </div>
-
-            </course-card>
-
-        </div>
-
-    </ng-template>
+  </div>
 
 
 </div>

src/app/app.component.ts

@@ -1,15 +1,17 @@
-import {AfterViewInit, Component, ElementRef, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
 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({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent implements AfterViewInit, OnInit {
 
     courses = COURSES;
 
@@ -19,9 +21,15 @@ export class AppComponent implements AfterViewInit {
     @ViewChildren(CourseCardComponent, {read: ElementRef})
     cards : QueryList<ElementRef>;
 
+    courses$: Observable<Course[]>;
 
-    constructor() {
 
+    constructor(private coursesService: CoursesService) {
+
+    }
+
+    ngOnInit() {
+      this.courses$ =  this.coursesService.loadCourses();
     }
 
     onToggle(isHighlighted:boolean) {

src/app/app.module.ts

@@ -7,6 +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 {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,9 @@ import { NgxUnlessDirective } from './directives/ngx-unless.directive';
     BrowserModule,
     BrowserAnimationsModule
   ],
-  providers: [],
+  providers: [
+    HttpClientModule
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/services/courses.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { CoursesService } from './courses.service';
+
+describe('CoursesService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CoursesService]
+    });
+  });
+
+  it('should be created', inject([CoursesService], (service: CoursesService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/courses.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Course} from '../model/course';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CoursesService {
+
+
+  constructor(private http: HttpClient) {
+
+
+
+  }
+
+  loadCourses() {
+    return this.http.get<Course[]>('/api/courses');
+  }
+
+}