Book Preview

[web-dave]

1. Generate BookPreview Component ng g c books/book-preview
2. declair a Input and a Output
   book-preview.component.ts

export class BookPreviewComponent {
  @Input() book: any;
  @Output() bookSelected = new EventEmitter();
}

2. show title and Subtitle in template
   book-preview.component.html

<strong>{{ book.title }}</strong> <br />
<small>{{ book.subtitle }}</small>

book-preview.component.scss

```scss @import "../../../utils"; :host { display: block; @include object(100%, 60px, $aqua); border-radius: 90px; margin-top: 10px; padding-left: 45px; padding-top: 10px; } ```

3. use book-preview in book-list template
   book-list.component.html

@for (book of books; track $index) {
  <app-book-preview [book]="book" />
}

4. click on a button should emit a event with the Book from book-preview to book-list
   book-preview.component.ts

  showMore() {
    this.bookSelected.emit(this.book);
  }

book-preview.component.html

```html details ```

book-list.component.ts

```ts selectBook(e: any) { console.log(e); } ```

book-list.component.html

```html ```

[web-dave]

NEXT