Creating a Checklist 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.

Create a file at src/app/home/ui/checklist-list.component.ts and add the following:

import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  Input,
  NgModule,
} from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { Checklist } from '../../shared/interfaces/checklist';

@Component({
  selector: 'app-checklist-list',
  template: `
    <ion-list lines="none">
      <ion-item *ngFor="let checklist of checklists; trackBy: trackByFn">
        <ion-label>{{ checklist.title }}</ion-label>
      </ion-item>
    </ion-list>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChecklistListComponent {
  @Input() checklists!: Checklist[];

  constructor() {}

  trackByFn(index: number, checklist: Checklist) {
    return checklist.id;
  }
}

@NgModule({
  imports: [CommonModule, IonicModule],
  declarations: [ChecklistListComponent],
  exports: [ChecklistListComponent],
})
export class ChecklistListComponentModule {}