Show Book Details

[web-dave]

• Generate a book-details component
• Click on a book-preview should bring you to this book-details component (RoutParams)
• Get the Book from the Service and show all Details
• You need a new Route.

[web-dave]

generate

  ng g c books/book-details

[web-dave]

book-list.component.ts

 constructor(
    private booksService: BooksService, 
    private router: Router,
    private route: ActivatedRoute) { }

  selectBook(book: IBook) {
    this.router.navigate([book.isbn], {relativeTo: this.route});
  }

[web-dave]

books-routing.module.ts

  children: [{
      path: '',
      component: BookListComponent
    }, {
      path: ':isbn',
      component: BookDetailsComponent
    }]

[web-dave]

book-details.component.ts

  constructor(
      private booksService: BooksService,
      private router: Router,
      private route: ActivatedRoute) { }


  ngOnInit() {
    this.route
      .params
      .subscribe((params: {isbn: string}) => {
        this.booksService.getBook(params.isbn)
          .subscribe(b => {
            console.log('!!', b);
            this.book = b;
          });
      });
  }

[web-dave]

book-details.component.html (example)

<!--
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
-->

<div class="panel panel-default" *ngIf="book" >
   <div class="panel-heading">{{book.title}} ({{book.isbn}})</div>
  <div class="panel-body">
    <p>{{book.abstract}}  <span class="badge">Seitenzahl: {{book.numPages}}</span> </p>
    <p>{{book.publisher.name}} ({{book.publisher.url}})</p>
  </div>
  <div class="panel-footer">{{book.author}}</div>
</div>

[web-dave]

Create a pipe