Creating a Checklist List Component

It’s time to create another dumb component. This time it will be specifically just for our HomeComponent, not shared with the entire application. The role of this component will be to display our checklist list.

It will be quite basic to begin with, all it needs to do is accept an input of checklists which will be of the type Checklist[]. It should then render each of those checklists out into a list. This is a good opportunity to see how far you can get implementing this component yourself. I will show my solution further down.

Create a file at src/app/home/ui/checklist-list.component.ts

Update the ChecklistListComponent to reflect the following:

import { Component, Input } from '@angular/core';
import { Checklist } from '../../shared/interfaces/checklist';

@Component({
  standalone: true,
  selector: 'app-checklist-list',
  template: `
    <ul>
      @for (checklist of checklists; track checklist.id){
      <li>
        {{ checklist.title }}
      </li>
      } @empty {
      <p>Click the add button to create your first checklist!</p>
      }
    </ul>
  `,
})
export class ChecklistListComponent {
  @Input({ required: true }) checklists!: Checklist[];
}