Learn TypeScript 3 by Building Web Applications

Displaying book collections

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 ...