File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
book-ui |
| styleUrls |
./book-ui.component.scss |
| templateUrl |
./book-ui.component.html |
Outputs
|
onSelect
|
Type : EventEmitter<any>
|
|
|
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from "@angular/core"
import { Book } from '../../../../book-data/models/book.model'
@Component({
selector: 'book-ui',
templateUrl: './book-ui.component.html',
styleUrls: ['./book-ui.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BookUiComponent {
@Input() book: Book
@Output() onSelect: EventEmitter<any> = new EventEmitter<any>()
}
<mat-card (click)="onSelect.emit()">
<img [src]="book.cover?.medium" alt="{{book.id}}" />
</mat-card>
mat-card {
padding: 0;
overflow: hidden;
height: 10rem;
margin-bottom: .75rem;
&:hover {
cursor: pointer;
}
img {
width: 100%;
}
}
Legend
Html element with directive