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.

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

@Component({
  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 {
  checklists = input.required<Checklist[]>();
}

This is all pretty inline with what we have been seeing so far. This component takes in a checklists input, and it renders out the title for each of those checklists in a list.

Notice that we have also added the @empty block here that will be displayed if our checklists array is empty.

Use the Checklist List Component

Now we need to use this component on our home page to display our list of checklists.

Again, see if you can get the checklists displaying on the home page using this new component by yourself before continuing.

    <section>
      <h2>Your checklists</h2>
      <app-checklist-list [checklists]="checklistService.checklists()" />
    </section>

That’s all we need to do! If you test the application now, you will see that it works! We can now add checklists…

But as soon as we refresh the application they disappear. We will worry about data persistence later though, in the next lesson we are going to move on to adding the ability to view individual checklists and add items to them.