Create a book-preview Component

[web-dave]

• generate a book-preview component
• declair a Input book
• declair a Output bookselected
• show title and isbn in template
• use book-preview in book-list template
• click on a button should emit a event with the Book from book-preview to book.list

[web-dave]

generate

  ng g c books/book-preview

[web-dave]

book-preview.component.ts

  @Input() book;
  @Output() bookselected = new EventEmitter();

[web-dave]

book-preview.component.html

<ul *ngIf="book">
  <li>{{book.title}}</li>
  <li>{{book.isbn}} <button (click)="selectThisBook()" class="btn btn-info">show me more</button></li>
</ul>

[web-dave]

book-preview.component.ts

  selectThisBook() {
    this.bookselected.emit(this.book);
  }

[web-dave]

book-list.component.html

  <div *ngIf="books">
    <book-preview *ngFor="let book of books" [book]="book" (bookselected)="selectBook($event)"></book-preview>
  </div>

[web-dave]

book-list.component.ts

  selectBook(book) {
    console.log(book);
  }

[web-dave]

Create a custom type