add first draft of search bar to comics list

kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.html

@@ -1,3 +1,6 @@
+<div>
+  <input #searchQuery type="text" (input)="search($event.target.value)" placeholder="Search" />
+</div>
 <ul>
   @for (comic of comics(); track comic.id) {
     <li>

kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts

@@ -1,16 +1,21 @@
-import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { Component, computed, DestroyRef, inject, OnInit, signal } from '@angular/core';
 import { Comic } from '../comic.model';
 import { ComicService } from '../comic-comics/comic.service';
-import { ComicComicComponent } from "../comic-comic/comic-comic.component";
+import { ComicComicComponent } from '../comic-comic/comic-comic.component';
 
 @Component({
   selector: 'app-comic-comics-list',
   imports: [ComicComicComponent],
   templateUrl: './comic-comics-list.component.html',
-  styleUrl: './comic-comics-list.component.css'
+  styleUrl: './comic-comics-list.component.css',
 })
 export class ComicComicsListComponent implements OnInit {
-  comics = signal<Comic[] | undefined>(undefined);
+  comicsFetched = signal<Comic[] | undefined>(undefined);
+  searchQuery = signal<string>('');
+  comics = computed(() => {
+    const sq = this.searchQuery();
+    return this.comicsFetched()?.filter(c => c.title.toLowerCase().includes(sq.toLowerCase()));
+  });
   isFetching = signal(false);
   error = signal('');
   private comicsService = inject(ComicService);
@@ -20,18 +25,22 @@ export class ComicComicsListComponent implements OnInit {
     this.isFetching.set(true);
     const subscription = this.comicsService.loadComics().subscribe({
       next: (comics) => {
-        this.comics.set(comics);
+        this.comicsFetched.set(comics);
       },
       error: (error: Error) => {
         this.error.set(error.message);
       },
       complete: () => {
         this.isFetching.set(false);
-      }
+      },
     });
 
     this.destroyRef.onDestroy(() => {
       subscription.unsubscribe();
-    })
+    });
+  }
+
+  search(query: string) {
+    this.searchQuery.set(query);
   }
 }