3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 7

Creating a Checklist List Component

Another dumb UI component!


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 {
} from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { Checklist } from '../../shared/interfaces/checklist';

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

  constructor() {}

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

  imports: [CommonModule, IonicModule],
  declarations: [ChecklistListComponent],
  exports: [ChecklistListComponent],
export class ChecklistListComponentModule {}

Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).