ngLibrary-Documentation
  1. Components
  2. BooksUiComponent

File

src/app/books/books-components/components/books/ui/books-ui.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector books-ui
styleUrls ./books-ui.component.scss
templateUrl ./books-ui.component.html

Index

Inputs

Inputs

books
Type : Book[]
Defined in src/app/books/books-components/components/books/ui/books-ui.component.ts:12
 
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[]
}
Copy
<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>
Copy

./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;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""