@@ -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 |
+
}
|