src/app/book-list/list-view/list-view.component.ts
Component that displays all the book in a top-down list
| selector | book-list-view |
| templateUrl | ./list-view.component.html |
books
|
Array of all the books displayed in this component This input property is passed down from the parent BookListComponent to this component
Type: |
import { Component, Input } from '@angular/core';
import { Book } from "app/models/book.model";
/**
* Component that displays all the book in a top-down list
*/
@Component({
selector: 'book-list-view',
templateUrl: './list-view.component.html'
})
export class ListViewComponent {
/**
* Array of all the books displayed in this component
*
* This input property is passed down from the parent {@link BookListComponent}
* to this component
*/
@Input() books: Book[];
}
<!-- BOOTSTRAP'S MEDIA OBJECT, see here: http://getbootstrap.com/components/#media-list -->
<ul class="media-list">
<li class="media" *ngFor="let book of books">
<div class="media-left">
<img src="assets/no-book-cover.png" alt="cover" width="50px" class="media-object">
</div>
<div class="media-body">
<h2 class="h4 media-heading"><a [routerLink]="['/books', book.product.skuId]">{{book.product.title}}</a></h2>
<p>{{book.product.description}}</p>
</div>
</li>
</ul>