|
@@ -1,2 +1,2 @@
|
|
| 1 |
-
|
| 2 |
<router-outlet></router-outlet>
|
| 1 |
+
<bm-book-list></bm-book-list>
|
| 2 |
<router-outlet></router-outlet>
|
|
@@ -4,11 +4,13 @@
|
|
| 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 |
CommonModule,
|
| 4 |
import { AppRoutingModule } from './app-routing.module';
|
| 5 |
import { AppComponent } from './app.component';
|
| 6 |
import { BookListComponent } from './book-list/book-list.component';
|
| 7 |
+
import { BookListItemComponent } from './book-list-item/book-list-item.component';
|
| 8 |
|
| 9 |
@NgModule({
|
| 10 |
declarations: [
|
| 11 |
AppComponent,
|
| 12 |
+
BookListComponent,
|
| 13 |
+
BookListItemComponent
|
| 14 |
],
|
| 15 |
imports: [
|
| 16 |
CommonModule,
|
|
@@ -1,18 +1,5 @@
|
|
| 1 |
<div class="ui middle aligned selection divided list">
|
| 2 |
-
<
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
[src]="book.thumbnails[0].url">
|
| 6 |
-
<div class="content">
|
| 7 |
-
<div class="header">{{ book.title }}</div>
|
| 8 |
-
<div *ngIf="book.subtitle" class="description">{{ book.subtitle }}</div>
|
| 9 |
-
<div class="metadata">
|
| 10 |
-
<span *ngFor="let author of book.authors; last as l">
|
| 11 |
-
{{ author }}<span *ngIf="!l">, </span>
|
| 12 |
-
</span>
|
| 13 |
-
<br>
|
| 14 |
-
ISBN {{ book.isbn }}
|
| 15 |
-
</div>
|
| 16 |
-
</div>
|
| 17 |
-
</a>
|
| 18 |
</div>
|
| 1 |
<div class="ui middle aligned selection divided list">
|
| 2 |
+
<bm-book-list-item class="item"
|
| 3 |
+
*ngFor="let b of books"
|
| 4 |
+
[book]="b"></bm-book-list-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 5 |
</div>
|
|
@@ -0,0 +1,14 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<img class="ui tiny image"
|
| 2 |
+
*ngIf="book.thumbnails && book.thumbnails[0] && book.thumbnails[0].url"
|
| 3 |
+
[src]="book.thumbnails[0].url">
|
| 4 |
+
<div class="content">
|
| 5 |
+
<div class="header">{{ book.title }}</div>
|
| 6 |
+
<div *ngIf="book.subtitle" class="description">{{ book.subtitle }}</div>
|
| 7 |
+
<div class="metadata">
|
| 8 |
+
<span *ngFor="let author of book.authors; last as l">
|
| 9 |
+
{{ author }}<span *ngIf="!l">, </span>
|
| 10 |
+
</span>
|
| 11 |
+
<br>
|
| 12 |
+
ISBN {{ book.isbn }}
|
| 13 |
+
</div>
|
| 14 |
+
</div>
|
|
@@ -0,0 +1,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { Component, OnInit, Input } from '@angular/core';
|
| 2 |
+
|
| 3 |
+
import { Book } from '../shared/book';
|
| 4 |
+
|
| 5 |
+
@Component({
|
| 6 |
+
selector: 'bm-book-list-item',
|
| 7 |
+
templateUrl: './book-list-item.component.html',
|
| 8 |
+
styleUrls: ['./book-list-item.component.css']
|
| 9 |
+
})
|
| 10 |
+
export class BookListItemComponent implements OnInit {
|
| 11 |
+
@Input() book: Book;
|
| 12 |
+
|
| 13 |
+
ngOnInit() {
|
| 14 |
+
}
|
| 15 |
+
}
|