new lessons Angular 19

Author: jhades

src/app/resource-demo/resource-demo.component.html

@@ -8,27 +8,33 @@ <h1>resource() Demo</h1>
   <div class="course-header">
 
     <div class="form-control">
-      <input placeholder="Search lessons" (keydown)="searchLessons(input.value)" #input>
+      <input placeholder="Search lessons"
+             (keydown)="searchLessons(input.value)" #input>
     </div>
 
 </div>
 
-    <div class="table-container">
-      <table class="results-table">
-        @for(lesson of lessons(); track lesson.id) {
-          <tr>
-            <td>
-              {{lesson.description}}
-            </td>
-          </tr>
-        }
-        @empty {
-          <div class="no-lessons">
-            No lessons found.
-          </div>
-        }
-      </table>
-    </div>
+    @if(lessons.isLoading()) {
+      <mat-spinner class="loading"/>
+    }
+    @else {
+      <div class="table-container">
+        <table class="results-table">
+          @for(lesson of lessons.value(); track lesson.id) {
+            <tr>
+              <td>
+                {{lesson.description}}
+              </td>
+            </tr>
+          }
+          @empty {
+            <div class="no-lessons">
+              No lessons found.
+            </div>
+          }
+        </table>
+      </div>
+    }
 
     <button class="btn reload-btn" (click)="reload()">
       Reload Lessons

src/app/resource-demo/resource-demo.component.ts

@@ -16,14 +16,26 @@ export class ResourceDemoComponent {
 
   search = signal<string>('');
 
-  lessons = signal<Lesson[]>([]);
+  lessons = resource<Lesson[], {search:string}>({
+    request: () => ({
+      search: this.search()
+    }),
+    loader: async ({request, abortSignal}) => {
+      const response = await
+        fetch(`${this.env.apiRoot}/search-lessons?query=${request.search}&courseId=18`,
+          {
+            signal: abortSignal
+          });
+      const json = await response.json();
+      return json.lessons;
+    }
+  });
 
   constructor() {
 
     effect(() => {
       console.log('searching lessons:', this.search() );
     })
-
   }
 
   searchLessons(search: string) {