File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
selected-book-ui |
| styleUrls |
./selected-book-ui.component.scss |
| templateUrl |
./selected-book-ui.component.html |
Outputs
|
onAddToBasket
|
Type : EventEmitter<any>
|
|
|
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>()
}
<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>
@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;
}
}
Legend
Html element with directive