3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 8

The Checklist Detail Page

Viewing the details for a particular checklist


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';

  selector: 'app-checklist',
  template: `

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

  imports: [
        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: () =>
              (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:


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).