ngLibrary-Documentation
  1. Components
  2. BookUiComponent

File

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

Metadata

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

Index

Inputs
Outputs

Inputs

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

Outputs

onSelect
Type : EventEmitter<any>
Defined in src/app/book/book-components/components/book/ui/book-ui.component.ts:13
 
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>()
}
Copy
<mat-card (click)="onSelect.emit()">
  <img [src]="book.cover?.medium" alt="{{book.id}}" />
</mat-card>
Copy

./book-ui.component.scss 

mat-card {
  padding: 0;
  overflow: hidden;
  height: 10rem;
  margin-bottom: .75rem;

  &:hover {
    cursor: pointer;
  }

  img {
    width: 100%;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""