Create a book-preview Component

web-dave / angular-starter-v2

6 stars 3 forks source link

Create a book-preview Component #10

Open web-dave opened 7 years ago

web-dave commented 7 years ago

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 commented 7 years ago

generate

  ng g c books/book-preview

web-dave commented 7 years ago

book-preview.component.ts

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

web-dave commented 7 years ago

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 commented 7 years ago

book-preview.component.ts

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

web-dave commented 7 years ago

book-list.component.html

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

web-dave commented 7 years ago

book-list.component.ts

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