|
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<main>
|
| 2 |
+
<bm-book-list></bm-book-list>
|
| 3 |
+
</main>
|
|
@@ -3,10 +3,12 @@ import { BrowserModule } from '@angular/platform-browser';
|
|
| 3 |
|
| 4 |
import { AppRoutingModule } from './app-routing.module';
|
| 5 |
import { AppComponent } from './app.component';
|
|
|
|
| 6 |
|
| 7 |
@NgModule({
|
| 8 |
declarations: [
|
| 9 |
-
AppComponent
|
|
|
|
| 10 |
],
|
| 11 |
imports: [
|
| 12 |
BrowserModule,
|
| 3 |
|
| 4 |
import { AppRoutingModule } from './app-routing.module';
|
| 5 |
import { AppComponent } from './app.component';
|
| 6 |
+
import { BookListComponent } from './book-list/book-list.component';
|
| 7 |
|
| 8 |
@NgModule({
|
| 9 |
declarations: [
|
| 10 |
+
AppComponent,
|
| 11 |
+
BookListComponent
|
| 12 |
],
|
| 13 |
imports: [
|
| 14 |
BrowserModule,
|
|
@@ -0,0 +1,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<h1>Books</h1>
|
| 2 |
+
<ul class="book-list">
|
| 3 |
+
<li *ngFor="let book of books">
|
| 4 |
+
<div class="list-item">
|
| 5 |
+
<img *ngIf="book.thumbnailUrl" [src]="book.thumbnailUrl" alt="Cover">
|
| 6 |
+
<h2>{{ book.title }}</h2>
|
| 7 |
+
<p role="doc-subtitle" *ngIf="book.subtitle">
|
| 8 |
+
{{ book.subtitle }}
|
| 9 |
+
</p>
|
| 10 |
+
<ul class="comma-list">
|
| 11 |
+
<li *ngFor="let author of book.authors">
|
| 12 |
+
{{ author }}
|
| 13 |
+
</li>
|
| 14 |
+
</ul>
|
| 15 |
+
<div>ISBN {{ book.isbn }}</div>
|
| 16 |
+
</div>
|
| 17 |
+
</li>
|
| 18 |
+
<li *ngIf="!books.length">
|
| 19 |
+
No books available.
|
| 20 |
+
</li>
|
| 21 |
+
</ul>
|
|
@@ -0,0 +1,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
| 2 |
+
|
| 3 |
+
import { BookListComponent } from './book-list.component';
|
| 4 |
+
|
| 5 |
+
describe('BookListComponent', () => {
|
| 6 |
+
let component: BookListComponent;
|
| 7 |
+
let fixture: ComponentFixture<BookListComponent>;
|
| 8 |
+
|
| 9 |
+
beforeEach(async () => {
|
| 10 |
+
await TestBed.configureTestingModule({
|
| 11 |
+
declarations: [ BookListComponent ]
|
| 12 |
+
})
|
| 13 |
+
.compileComponents();
|
| 14 |
+
|
| 15 |
+
fixture = TestBed.createComponent(BookListComponent);
|
| 16 |
+
component = fixture.componentInstance;
|
| 17 |
+
fixture.detectChanges();
|
| 18 |
+
});
|
| 19 |
+
|
| 20 |
+
it('should create', () => {
|
| 21 |
+
expect(component).toBeTruthy();
|
| 22 |
+
});
|
| 23 |
+
});
|
|
@@ -0,0 +1,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { Component } from '@angular/core';
|
| 2 |
+
|
| 3 |
+
import { Book } from '../shared/book';
|
| 4 |
+
|
| 5 |
+
@Component({
|
| 6 |
+
selector: 'bm-book-list',
|
| 7 |
+
templateUrl: './book-list.component.html',
|
| 8 |
+
styleUrls: ['./book-list.component.css']
|
| 9 |
+
})
|
| 10 |
+
export class BookListComponent {
|
| 11 |
+
books: Book[] = [];
|
| 12 |
+
|
| 13 |
+
constructor() {
|
| 14 |
+
this.books = [
|
| 15 |
+
{
|
| 16 |
+
isbn: '12345',
|
| 17 |
+
title: 'Tierisch gut kochen',
|
| 18 |
+
authors: ['Mrs Chimp', 'Mr Gorilla'],
|
| 19 |
+
published: '2022-06-20',
|
| 20 |
+
subtitle: 'Rezepte von Affe bis Zebra',
|
| 21 |
+
thumbnailUrl: 'https://cdn.ng-buch.de/kochen.png',
|
| 22 |
+
description: 'Immer lecker und gut'
|
| 23 |
+
},
|
| 24 |
+
{
|
| 25 |
+
isbn: '67890',
|
| 26 |
+
title: 'Backen mit Affen',
|
| 27 |
+
authors: ['Orang Utan'],
|
| 28 |
+
published: '2022-07-15',
|
| 29 |
+
subtitle: 'Bananenbrot und mehr',
|
| 30 |
+
thumbnailUrl: 'https://cdn.ng-buch.de/backen.png',
|
| 31 |
+
description: 'Tolle Backtipps für Mensch und Tier'
|
| 32 |
+
}
|
| 33 |
+
];
|
| 34 |
+
}
|
| 35 |
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
export interface Book {
|
| 2 |
+
isbn: string;
|
| 3 |
+
title: string;
|
| 4 |
+
authors: string[];
|
| 5 |
+
published?: string;
|
| 6 |
+
subtitle?: string;
|
| 7 |
+
thumbnailUrl?: string;
|
| 8 |
+
description?: string;
|
| 9 |
+
}
|