Reactive Angular Course

Author: Your Name

src/app/course/course.component.html

@@ -1,27 +1,33 @@
 
-  <div class="course">
+<ng-container *ngIf="(course$ | async) as course">
 
-    <h2>{{course?.description}}</h2>
+    <div class="course">
 
-    <img class="course-thumbnail" [src]="course?.iconUrl">
+        <h2>{{course?.description}}</h2>
 
-    <table class="lessons-table mat-elevation-z7">
+        <img class="course-thumbnail" [src]="course?.iconUrl">
 
-      <thead>
-      <th>#</th>
-      <th>Description</th>
-      <th>Duration</th>
-      </thead>
+        <table class="lessons-table mat-elevation-z7">
 
-      <tr class="lesson-row" *ngFor="let lesson of lessons">
-        <td class="seqno-cell">{{lesson.seqNo}}</td>
-        <td class="description-cell">{{lesson.description}}</td>
-        <td class="duration-cell">{{lesson.duration}}</td>
-      </tr>
+            <thead>
+            <th>#</th>
+            <th>Description</th>
+            <th>Duration</th>
+            </thead>
+
+            <!--tr class="lesson-row" *ngFor="let lesson of lessons">
+                <td class="seqno-cell">{{lesson.seqNo}}</td>
+                <td class="description-cell">{{lesson.description}}</td>
+                <td class="duration-cell">{{lesson.duration}}</td>
+            </tr-->
+
+        </table>
+
+    </div>
+
+</ng-container>
 
-    </table>
 
-  </div>
 
 
 

src/app/course/course.component.ts

@@ -15,6 +15,7 @@ import {
 } from 'rxjs/operators';
 import {merge, fromEvent, Observable, concat, throwError} from 'rxjs';
 import {Lesson} from '../model/lesson';
+import {CoursesService} from '../services/courses.service';
 
 
 @Component({
@@ -24,18 +25,21 @@ import {Lesson} from '../model/lesson';
 })
 export class CourseComponent implements OnInit {
 
-  course: Course;
+  course$: Observable<Course>;
 
-  lessons: Lesson[];
+  lessons$: Observable<Lesson[]>;
 
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private coursesService: CoursesService) {
 
 
   }
 
   ngOnInit() {
 
+        const courseId = parseInt(this.route.snapshot.paramMap.get("courseId"));
 
+        this.course$ = this.coursesService.loadCourseById(courseId);
 
   }
 

src/app/lesson/lesson.component.html

@@ -1 +1,15 @@
-<p>lesson works!</p>
+
+<div class="lesson-detail">
+
+    <h3>{{lesson.description}}</h3>
+
+    <h5>Duration: {{lesson.duration}}</h5>
+
+    <iframe width="400" height="220"  frameborder="0" allowfullscreen
+        [src]="('https://www.youtube.com/embed/' + lesson?.videoId) | safeUrl">
+
+
+    </iframe>
+
+
+</div>

src/app/lesson/lesson.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {Lesson} from '../model/lesson';
 
 @Component({
   selector: 'lesson',
@@ -7,9 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LessonComponent implements OnInit {
 
+  @Input()
+  lesson:Lesson;
+
   constructor() { }
 
-  ngOnInit(): void {
+  ngOnInit() {
+
   }
 
 }

src/app/search-lessons/search-lessons.component.html

@@ -46,7 +46,7 @@ <h2>Search All Lessons</h2>
             Back to Search
         </button>
 
-        <lesson></lesson>
+        <lesson [lesson]="activeLesson"></lesson>
 
     </ng-template>
 

src/app/services/courses.service.ts

@@ -15,6 +15,13 @@ export class CoursesService {
 
     }
 
+    loadCourseById(courseId:number) {
+       return this.http.get<Course>(`/api/courses/${courseId}`)
+            .pipe(
+              shareReplay()
+            );
+    }
+
     loadAllCourses(): Observable<Course[]> {
         return this.http.get<Course[]>("/api/courses")
             .pipe(