Differenzansicht 13-search
im Vergleich zu 12-validation

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/books-portal/book-list/book-list.ng.html CHANGED
@@ -26,7 +26,7 @@
26
  aria-label="Search"
27
  />
28
 
29
- @for (b of filteredBooks(); track b.isbn) {
30
  <app-book-item [book]="b" (like)="addLikedBook($event)" />
31
  }
32
  </div>
 
26
  aria-label="Search"
27
  />
28
 
29
+ @for (b of books.value(); track b.isbn) {
30
  <app-book-item [book]="b" (like)="addLikedBook($event)" />
31
  }
32
  </div>
src/app/books-portal/book-list/book-list.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { Component, computed, inject, signal } from '@angular/core';
 
2
 
3
  import { Book } from '../../shared/book';
4
  import { BookItem } from '../book-item/book-item';
@@ -12,20 +13,23 @@ import { BookStore } from '../../shared/book-store';
12
  })
13
  export class BookList {
14
  #store = inject(BookStore);
 
15
 
16
- readonly searchTerm = signal('');
 
17
 
18
- readonly books = this.#store.getBookList();
19
  readonly likedBooks = signal<Book[]>([]);
20
 
21
- readonly filteredBooks = computed(() => {
22
- if (!this.searchTerm()) {
23
- return this.books.value();
24
- }
25
-
26
- const term = this.searchTerm().toLowerCase();
27
- return this.books.value().filter((b) => b.title.toLowerCase().includes(term));
28
- });
 
29
 
30
  addLikedBook(newLikedBook: Book) {
31
  const foundBook = this.likedBooks().find(
 
1
+ import { Component, effect, inject, input, linkedSignal, signal } from '@angular/core';
2
+ import { Router } from '@angular/router';
3
 
4
  import { Book } from '../../shared/book';
5
  import { BookItem } from '../book-item/book-item';
 
13
  })
14
  export class BookList {
15
  #store = inject(BookStore);
16
+ #router = inject(Router);
17
 
18
+ readonly search = input('');
19
+ readonly searchTerm = linkedSignal(() => this.search() || '');
20
 
21
+ readonly books = this.#store.getBookList(this.searchTerm);
22
  readonly likedBooks = signal<Book[]>([]);
23
 
24
+ constructor() {
25
+ effect(() => {
26
+ this.#router.navigate([], {
27
+ queryParams: {
28
+ search: this.searchTerm() || null
29
+ }
30
+ });
31
+ });
32
+ }
33
 
34
  addLikedBook(newLikedBook: Book) {
35
  const foundBook = this.likedBooks().find(
src/app/shared/book-store.ts CHANGED
@@ -11,9 +11,12 @@ export class BookStore {
11
  #http = inject(HttpClient);
12
  #apiUrl = 'https://api6.angular-buch.com';
13
 
14
- getBookList(): HttpResourceRef<Book[]> {
15
  return httpResource<Book[]>(
16
- () => `${this.#apiUrl}/books`,
 
 
 
17
  { defaultValue: [] }
18
  );
19
  }
 
11
  #http = inject(HttpClient);
12
  #apiUrl = 'https://api6.angular-buch.com';
13
 
14
+ getBookList(searchTerm: Signal<string>): HttpResourceRef<Book[]> {
15
  return httpResource<Book[]>(
16
+ () => ({
17
+ url: `${this.#apiUrl}/books`,
18
+ params: { search: searchTerm() }
19
+ }),
20
  { defaultValue: [] }
21
  );
22
  }