src/app/books/books-components/components/books/ui/books-ui.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | books-ui |
| styleUrls | ./books-ui.component.scss |
| templateUrl | ./books-ui.component.html |
Inputs |
| books | |
Type : Book[]
|
|
import { Component, Input, ChangeDetectionStrategy } from "@angular/core"
import { Book } from '../../../../../book/book-data/models/book.model'
@Component({
selector: 'books-ui',
templateUrl: './books-ui.component.html',
styleUrls: ['./books-ui.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BooksUiComponent {
@Input() books: Book[]
}
<article fxLayout="column" fxLayoutAlign="start">
<h1 fxFlex="1 0 auto">Inventory</h1>
<section class="inventory" fxFlex="1 1 100%"
fxLayout="row wrap" fxLayoutAlign="start start" fxLayoutGap="2%">
<ng-container *ngFor="let book of books">
<book [book]="book" fxFlex="0 0 17.6%" fxFlex.lt-md="0 0 44%" fxFlex.lt-sm="0 0 100%"></book>
</ng-container>
<div *ngIf="books.length === 0">
No Books Yet
</div>
</section>
</article>
./books-ui.component.scss
@import '../../../../../../styles/layout';
article {
height: calc(100vh - #{$header-height});
// @todo move the padding into the parent component (let the view dress that up)
padding: 1rem;
padding-bottom: 0;
}
.inventory {
overflow-y: auto;
padding-top: 1rem;
padding-bottom: 1rem;
}
Book {
min-height: 1px;
min-width: 1px;
}