We will now create the component that will receive and render a book collection. Again, this component can remain dumb:

1. It will accept a list of books as input (that is, the collection to display).
2. It will emit events when actions are performed on the elements in the list (for example, request to delete book from the collection).

Start by creating the component using the CLI:

ng g c components/book-list

Then, adapt the controller as follows:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; 
import { Book } from '../../entities/book.entity'; 
 
@Component({ 
  selector: 'app-book-list', 
  templateUrl: './book-list.component.html', 
  styleUrls: ['./book-list.component.scss'] 
}) 
export class BookListComponent implements OnInit { 
  @Input() 
  books: Book[]; 
 
  @Output() 
  removedBook: EventEmitter<string> = new EventEmitter<string>(); 
 
  constructor() { 
  } 
 
  ngOnInit() { 
  } 
 
  removeBook(bookId: string): void { 
    this.removedBook.emit(bookId); 
  } 
 
  trackById(book: Book): string { 
    return book.identifier; 
  } 
} 

And continue with the template:

<table class="collectionTable"> 
  <thead> 
  <tr> 
    <td>Picture</td> 
    <td>Name</td> 
    <td>Genre</td> 
    <td>Description</td> 
    <td>Author</td> 
    <td>Pages</td> 
    <td>Remove</td> 
  </tr> 
  </thead> 
  <tbody> 
  <tr *ngFor="let book of books; trackBy: trackById"> 
    <td> 
      <img [src]="book.pictureLocation" class="mediaImage"> 
    </td> 
    <td> 
      {{ book.name }} 
    </td> 
    <td> 
      {{ book.genre }} 
    </td> 
    <td> 
      {{ book.description }} 
    </td> 
    <td> 
      {{ book.author }} 
    </td> 
    <td> 
      {{ book.numberOfPages }} 
    </td> 
    <td> 
      <button (click)="removeBook(book.identifier)">X</button> 
    </td> 
  </tr> 
  </tbody> 
</table> 

Notice the [src] binding for the book's picture location.

Let's quickly take a look at BookModule to see how magic the Angular CLI is:

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { BookNewComponent } from './components/book-new/book-new.component'; 
import { BookPageComponent } from './pages/book-page/book-page.component'; 
import { BookListComponent } from './components/book-list/book-list.component'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
 
@NgModule({ 
  declarations: [BookPageComponent, BookNewComponent, 
  BookListComponent], 
  imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule, 
  ], 
  exports: [BookPageComponent] 
}) 
export class BookModule { 
} 

As you can see, the two newly created components have automatically been added to the declarations array. Thanks to that, we can directly use these components inside of BookModule.

We have now reached the very last steps of our migration to Angular!