Reactive Angular Course

Author: Your Name

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

@@ -8,27 +8,31 @@ <h2>Search All Lessons</h2>
 
   </mat-form-field>
 
-  <button class="search" mat-raised-button color="primary">
+  <button class="search" mat-raised-button color="primary"
+          (click)="onSearch(searchInput.value)" >
     <mat-icon>search</mat-icon>
     Search
   </button>
 
-    <table class="lessons-table mat-elevation-z7">
+    <ng-container *ngIf="(searchResults$ | async) as lessons">
 
-      <thead>
-      <th>#</th>
-      <th>Description</th>
-      <th>Duration</th>
-      </thead>
+        <table class="lessons-table mat-elevation-z7">
 
-      <!-- tr class="lesson-row">
-        <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>
 
-    </table>
+            <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>
+
+    </ng-container>
 
 
 </div>

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

@@ -15,6 +15,7 @@ import {
 } from 'rxjs/operators';
 import {merge, fromEvent, Observable, concat} from 'rxjs';
 import {Lesson} from '../model/lesson';
+import {CoursesService} from '../services/courses.service';
 
 
 @Component({
@@ -24,7 +25,9 @@ import {Lesson} from '../model/lesson';
 })
 export class SearchLessonsComponent implements OnInit {
 
-  constructor() {
+  searchResults$ : Observable<Lesson[]>;
+
+  constructor(private coursesService: CoursesService) {
 
 
   }
@@ -34,6 +37,10 @@ export class SearchLessonsComponent implements OnInit {
 
   }
 
+    onSearch(search:string) {
+        this.searchResults$  = this.coursesService.searchLessons(search);
+    }
+
 }
 
 

src/app/services/courses.service.ts

@@ -3,6 +3,7 @@ import {HttpClient} from '@angular/common/http';
 import {Course} from '../model/course';
 import {Observable} from 'rxjs';
 import {map, shareReplay} from 'rxjs/operators';
+import {Lesson} from '../model/lesson';
 
 
 @Injectable({
@@ -31,4 +32,25 @@ export class CoursesService {
     }
 
 
+    searchLessons(search:string): Observable<Lesson[]> {
+        return this.http.get<Lesson[]>('/api/lessons', {
+            params: {
+                filter: search,
+                pageSize: "100"
+            }
+        })
+            .pipe(
+                map(res => res["payload"]),
+                shareReplay()
+            );
+    }
+
+
 }
+
+
+
+
+
+
+