20230728-angular-Erwieterung-observAsyncPipe

src/app/app-routing.module.ts

@@ -1,7 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: 'home', component: HomeComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,8 +1,11 @@
+<nav>
+  <a routerLink="/home" routerLinkActive="active" ariaCurrentWhenActive="page"
+    >Home</a
+  >
+  <a routerLink="/books" routerLinkActive="active" ariaCurrentWhenActive="page"
+    >Books</a
+  >
+</nav>
 <main>
-  <bm-book-list *ngIf="!book" (selectBook)="showDetails($event)"></bm-book-list>
-  <bm-book-details
-    *ngIf="book"
-    (leave)="showList()"
-    [book]="book"
-  ></bm-book-details>
+  <router-outlet></router-outlet>
 </main>

src/app/app.module.ts

@@ -4,10 +4,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BooksModule } from './books/books.module';
+import { HomeComponent } from './home/home.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, BooksModule],
+  declarations: [AppComponent, HomeComponent],
+  imports: [BrowserModule, AppRoutingModule, BooksModule, HttpClientModule],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/books/book-details/book-details.component.html

@@ -1,5 +1,5 @@
-<div class="details" *ngIf="book">
-  <h1>{{ book.tilte }}</h1>
+<div class="details" *ngIf="book$ | async as book">
+  <h1>{{ book.title }}</h1>
   <p role="doc-subtitle" *ngIf="book.subtilte">{{ book.subtilte }}</p>
   <div class="header">
     <div>
@@ -20,5 +20,6 @@
   <h2>Description</h2>
   <p>{{ book.description }}</p>
   <img *ngIf="book.thumbnailUrl" [src]="book.thumbnailUrl" alt="Cover" />
-  <button class="arrow-left" (click)="doLeave()">Back to list</button>
+  <a class="button" routerLink="..">Back to list</a>
+  <button class="red" (click)="removeBook(book.isbn)">Remove book</button>
 </div>

src/app/books/book-details/book-details.component.ts

@@ -1,5 +1,8 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component } from '@angular/core';
 import { Book } from 'src/shared/book';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BookStoreService } from 'src/app/shared/book-store.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'bm-book-details',
@@ -7,10 +10,21 @@ import { Book } from 'src/shared/book';
   styleUrls: ['./book-details.component.css'],
 })
 export class BookDetailsComponent {
-  @Input() book?: Book;
-  @Output() leave = new EventEmitter<void>();
+  book$: Observable<Book>;
 
-  doLeave() {
-    this.leave.emit();
+  constructor(
+    private service: BookStoreService,
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {
+    const isbn = this.route.snapshot.paramMap.get('isbn')!;
+    this.book$ = this.service.getSingle(isbn);
+  }
+  removeBook(isbn: string) {
+    if (window.confirm('Remove book?')) {
+      this.service.remove(isbn).subscribe(() => {
+        this.router.navigateByUrl('/books');
+      });
+    }
   }
 }

src/app/books/book-list-item/book-list-item.component.html

@@ -1,8 +1,8 @@
-<div *ngIf="book" class="list-item">
+<a *ngIf="book" [routerLink]="book.isbn" class="list-item">
   <img *ngIf="book.thumbnailUrl" [src]="book.thumbnailUrl" alt="Cover" />
-  <h2>{{ book.tilte }}</h2>
+  <h2>{{ book.title }}</h2>
   <p role="doc-subtitle" *ngIf="book.subtilte">
-    {{ book.tilte }}
+    {{ book.title }}
   </p>
   <ul class="comma-list">
     <li *ngFor="let author of book.authors">
@@ -10,4 +10,4 @@
     </li>
   </ul>
   <div>ISBN {{ book.isbn }}</div>
-</div>
+</a>

src/app/books/book-list/book-list.component.html

@@ -1,10 +1,7 @@
 <h1>Books</h1>
-<ul class="book-list">
-  <li *ngFor="let book of books">
-    <bm-book-list-item
-      [book]="book"
-      (click)="doSelect(book)"
-    ></bm-book-list-item>
+<ul class="book-list" *ngIf="books$ | async as books">
+  <li *ngFor="let b of books$ | async">
+    <bm-book-list-item [book]="b"></bm-book-list-item>
   </li>
-  <li *ngIf="!books.length">No books available.</li>
+  <li *ngIf="!(books$ | async)?.length">No books available.</li>
 </ul>

src/app/books/book-list/book-list.component.ts

@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { Book } from 'src/shared/book';
+import { BookStoreService } from 'src/app/shared/book-store.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'bm-book-list',
@@ -7,30 +9,13 @@ import { Book } from 'src/shared/book';
   styleUrls: ['./book-list.component.css'],
 })
 export class BookListComponent {
-  books: Book[] = [];
+  books$: Observable<Book[]>;
   @Output() selectBook = new EventEmitter<Book>();
-  constructor() {
-    this.books = [
-      {
-        isbn: '12345',
-        tilte: 'Tierisch gut kochen',
-        authors: ['Mrs Chimp', 'Mr Gorilla'],
-        published: '2022-06-20',
-        subtilte: 'Rezepte von Affe bis Zebre',
-        thumbnailUrl: 'https://cdn.ng-buch.de/kochen.png',
-        description: 'Immer lecker und gut',
-      },
-      {
-        isbn: '67890',
-        tilte: 'Backen mit Affen',
-        authors: ['Orang Utan'],
-        published: '2022-07-15',
-        subtilte: 'Bananenbrot und mehr',
-        thumbnailUrl: 'https://cdn.ng-buch.de/backen.png',
-        description: 'Tolle Backtipps für Menschen und Tier',
-      },
-    ];
+
+  constructor(private service: BookStoreService) {
+    this.books$ = this.service.getAll();
   }
+
   doSelect(book: Book) {
     this.selectBook.emit(book);
   }

src/app/books/books-routing.module.ts

@@ -1,10 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { BookDetailsComponent } from './book-details/book-details.component';
+import { BookListComponent } from './book-list/book-list.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'books', component: BookListComponent },
+  { path: 'books/:isbn', component: BookDetailsComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class BooksRoutingModule { }
+export class BooksRoutingModule {}

src/app/books/books.module.ts

@@ -13,6 +13,6 @@ import { BookDetailsComponent } from './book-details/book-details.component';
     BookListItemComponent,
   ],
   imports: [CommonModule, BooksRoutingModule],
-  exports: [BookListComponent, BookDetailsComponent],
+  exports: [],
 })
 export class BooksModule {}

src/app/home/home.component.html

@@ -0,0 +1,3 @@
+<h1>Home</h1>
+
+<a routerLink="/books" class="button red">Show book list</a>

src/app/home/home.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomeComponent]
+    });
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'bm-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent {
+
+}

src/app/shared/book-store.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BookStoreService } from './book-store.service';
+
+describe('BookStoreService', () => {
+  let service: BookStoreService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BookStoreService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/book-store.service.ts

@@ -0,0 +1,25 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Book } from 'src/shared/book';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BookStoreService {
+  private apiUrl = 'https://api5.angular-buch.com';
+
+  constructor(private http: HttpClient) {}
+
+  getAll(): Observable<Book[]> {
+    return this.http.get<Book[]>(`${this.apiUrl}/books`);
+  }
+
+  getSingle(isbn: string): Observable<Book> {
+    return this.http.get<Book>(`${this.apiUrl}/books/${isbn}`);
+  }
+
+  remove(isbn: string): Observable<unknown> {
+    return this.http.delete(`${this.apiUrl}/books/${isbn}`);
+  }
+}

src/shared/book.ts

@@ -1,6 +1,6 @@
 export interface Book {
   isbn: string;
-  tilte: string;
+  title: string;
   authors: string[];
   published?: string;
   subtilte?: string;