Differenzansicht 08-http
im Vergleich zu 07-inputparams

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/app.config.ts CHANGED
@@ -1,11 +1,13 @@
1
  import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
2
  import { provideRouter, withComponentInputBinding } from '@angular/router';
 
3
 
4
  import { routes } from './app.routes';
5
 
6
  export const appConfig: ApplicationConfig = {
7
  providers: [
8
  provideExperimentalZonelessChangeDetection(),
9
- provideRouter(routes, withComponentInputBinding())
 
10
  ]
11
  };
 
1
  import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
2
  import { provideRouter, withComponentInputBinding } from '@angular/router';
3
+ import { provideHttpClient, withFetch } from '@angular/common/http';
4
 
5
  import { routes } from './app.routes';
6
 
7
  export const appConfig: ApplicationConfig = {
8
  providers: [
9
  provideExperimentalZonelessChangeDetection(),
10
+ provideRouter(routes, withComponentInputBinding()),
11
+ provideHttpClient(withFetch())
12
  ]
13
  };
src/app/books-portal/book-details/book-details.ng.html CHANGED
@@ -28,6 +28,9 @@
28
  <img [src]="b.imageUrl" alt="Cover" />
29
  <footer>
30
  <a routerLink="/books">Back to list</a>
 
 
 
31
  </footer>
32
  </article>
33
  }
 
28
  <img [src]="b.imageUrl" alt="Cover" />
29
  <footer>
30
  <a routerLink="/books">Back to list</a>
31
+ <button type="button" (click)="deleteBook(b.isbn)">
32
+ Delete book
33
+ </button>
34
  </footer>
35
  </article>
36
  }
src/app/books-portal/book-details/book-details.ts CHANGED
@@ -1,6 +1,7 @@
1
- import { Component, computed, inject, input } from '@angular/core';
2
- import { RouterLink } from '@angular/router';
3
 
 
4
  import { BookStore } from '../../shared/book-store';
5
 
6
  @Component({
@@ -11,7 +12,24 @@ import { BookStore } from '../../shared/book-store';
11
  })
12
  export class BookDetails {
13
  #store = inject(BookStore);
 
14
 
15
  readonly isbn = input.required<string>();
16
- readonly book = computed(() => this.#store.getOneBook(this.isbn()))
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  }
 
1
+ import { Component, effect, inject, input, signal } from '@angular/core';
2
+ import { Router, RouterLink } from '@angular/router';
3
 
4
+ import { Book } from '../../shared/book';
5
  import { BookStore } from '../../shared/book-store';
6
 
7
  @Component({
 
12
  })
13
  export class BookDetails {
14
  #store = inject(BookStore);
15
+ #router = inject(Router);
16
 
17
  readonly isbn = input.required<string>();
18
+ readonly book = signal<Book | undefined>(undefined);
19
+
20
+ constructor() {
21
+ effect(() => {
22
+ this.#store.getOneBook(this.isbn()).subscribe(book => {
23
+ this.book.set(book);
24
+ });
25
+ });
26
+ }
27
+
28
+ deleteBook(isbn: string) {
29
+ if (window.confirm('Delete book?')) {
30
+ this.#store.deleteBook(isbn).subscribe(() => {
31
+ this.#router.navigateByUrl('/books');
32
+ });
33
+ }
34
+ }
35
  }
src/app/books-portal/book-list/book-list.ts CHANGED
@@ -28,7 +28,9 @@ export class BookList {
28
  });
29
 
30
  constructor() {
31
- this.books.set(this.#store.getBookList());
 
 
32
  }
33
 
34
  addLikedBook(newLikedBook: Book) {
 
28
  });
29
 
30
  constructor() {
31
+ this.#store.getBookList().subscribe(books => {
32
+ this.books.set(books);
33
+ });
34
  }
35
 
36
  addLikedBook(newLikedBook: Book) {
src/app/shared/book-store.ts CHANGED
@@ -1,4 +1,6 @@
1
- import { Injectable } from '@angular/core';
 
 
2
 
3
  import { Book } from './book';
4
 
@@ -7,32 +9,18 @@ import { Book } from './book';
7
  })
8
  export class BookStore {
9
 
10
- #books: Book[] = [
11
- {
12
- isbn: '12345',
13
- title: 'Tierisch gut kochen',
14
- authors: ['Mrs Chimp', 'Mr Gorilla'],
15
- subtitle: 'Rezepte von Affe bis Zebra',
16
- imageUrl: 'https://cdn.ng-buch.de/kochen.png',
17
- description: 'Immer lecker und gut',
18
- createdAt: new Date().toISOString()
19
- },
20
- {
21
- isbn: '67890',
22
- title: 'Backen mit Affen',
23
- subtitle: 'Bananenbrot und mehr',
24
- authors: ['Orang Utan'],
25
- imageUrl: 'https://cdn.ng-buch.de/backen.png',
26
- description: 'Tolle Backtipps für Mensch und Tier',
27
- createdAt: new Date().toISOString()
28
- }
29
- ];
30
 
31
- getBookList(): Book[] {
32
- return this.#books;
33
  }
34
 
35
- getOneBook(isbn: string): Book | undefined {
36
- return this.#books.find(book => book.isbn === isbn);
 
 
 
 
37
  }
38
  }
 
1
+ import { inject, Injectable } from '@angular/core';
2
+ import { HttpClient } from '@angular/common/http';
3
+ import { Observable } from 'rxjs';
4
 
5
  import { Book } from './book';
6
 
 
9
  })
10
  export class BookStore {
11
 
12
+ #http = inject(HttpClient);
13
+ #apiUrl = 'https://api6.angular-buch.com';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
 
15
+ getBookList(): Observable<Book[]> {
16
+ return this.#http.get<Book[]>(`${this.#apiUrl}/books`);
17
  }
18
 
19
+ getOneBook(isbn: string): Observable<Book> {
20
+ return this.#http.get<Book>(`${this.#apiUrl}/books/${isbn}`);
21
+ }
22
+
23
+ deleteBook(isbn: string): Observable<unknown> {
24
+ return this.#http.delete(`${this.#apiUrl}/books/${isbn}`);
25
  }
26
  }