ngLibrary-Documentation
  1. Components
  2. SelectedBookUiComponent

File

src/app/book/book-components/components/selected-book/ui/selected-book-ui.component.ts

Metadata

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

Index

Inputs
Outputs

Inputs

selectedBook
Type : Book
Defined in src/app/book/book-components/components/selected-book/ui/selected-book-ui.component.ts:12

Outputs

onAddToBasket
Type : EventEmitter<any>
Defined in src/app/book/book-components/components/selected-book/ui/selected-book-ui.component.ts:13
 
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from "@angular/core"

import { Book } from '../../../../book-data/models/book.model'

@Component({
  selector: 'selected-book-ui',
  templateUrl: './selected-book-ui.component.html',
  styleUrls: ['./selected-book-ui.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SelectedBookUiComponent {
  @Input() selectedBook: Book
  @Output() onAddToBasket: EventEmitter<any> = new EventEmitter<any>()
}
Copy
<article class="selected-book-container" fxLayout="column">
  <div *ngIf="!selectedBook" class="inner-container">
    Select a book to open it here
  </div>
  <div *ngIf="selectedBook" fxLayout="column" fxFlex="100%" class="inner-container">
    <section class="book-details" fxFlex="100%" fxLayout="column" fxLayoutAlign="start end">
      <h2>{{selectedBook.title}}</h2>
      <img *ngIf="selectedBook.cover" fxFlex="0 0 auto" [src]="selectedBook.cover?.large" alt="{{selectedBook.author ? selectedBook.author : ''}}" />
      <h5 *ngIf="selectedBook.authors">Author: {{selectedBook.authors[0].name}}</h5>
    </section>
    <div fxLayoutAlign="center center" class="add-to-basket-btn-container" fxLayout="row">
      <button mat-raised-button color="accent" (click)="onAddToBasket.emit()" fxFlex="100%">
        <span>Add</span><span fxHide.lt-sm> to Basket</span>
      </button>
    </div>
  </div>
</article>
Copy

./selected-book-ui.component.scss 

@import '../../../../../../styles/layout';

.selected-book-container {
  height: calc(100vh - #{$header-height});
  .inner-container {
    padding: 1rem;
  }
}

.book-details {
  img {
    max-width: 100%;
  }
}

.add-to-basket-btn-container {
  padding: 1rem;
  button {
    height: 3.5rem;
    font-size: 1.25rem;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""