The Checklist Detail Page

Now it’s time to create our next smart component/routed component/feature component - whatever you want to call it! This one will be responsible for displaying the details of a particular checklist.

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

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-checklist',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Checklist</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content> </ion-content>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChecklistComponent {
  constructor(private route: ActivatedRoute) {}
}

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: ChecklistComponent,
      },
    ]),
  ],
  declarations: [ChecklistComponent],
})
export class ChecklistComponentModule {}

This is the same basic idea as our HomeComponent. A key difference between a smart/routed component and our dumb components is that we also configure the routing for a smart component in its module. We have also injected the ActivatedRoute here which we will use in a moment to get the id for a specific checklist that is being viewed.

Since this is a routed component, we are also going to need to set up the routing for this in our root module.

Add the following route to src/app/app.component.ts:

        {
          path: 'home',
          loadChildren: () =>
            import('./home/home.component').then((m) => m.HomeComponentModule),
        },
        {
          path: 'checklist/:id',
          loadChildren: () =>
            import('./checklist/checklist.component').then(
              (m) => m.ChecklistComponentModule
            ),
        },

Notice that for this path we are using :id so that we will be able to retrieve the checklist id passed in as a parameter through the URL. Before we can do anything with that id we are going to need a way to retrieve a particular checklist if we have its id.

Getting a single checklist by its id

Add the following method to checklist.service.ts: