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 { Component } from '@angular/core';

@Component({
  selector: 'app-checklist',
  template: ` <p>Hi</p> `,
})
export default class ChecklistComponent {}

NOTE: We are using export default here because this is a routed component.

Since this is a routed component, we are also going to need to set up the routing:

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

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.component'),
  },
  {
    path: 'checklist/:id',
    loadComponent: () => import('./checklist/checklist.component'),
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

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

Let’s add a way to get the specific checklist that matches the id from the route in our ChecklistComponent.

Add the following to the ChecklistComponent class:

export default class ChecklistComponent {
  checklistService = inject(ChecklistService);
  route = inject(ActivatedRoute);

  params = toSignal(this.route.paramMap);

  checklist = computed(() =>
    this.checklistService
      .checklists()
      .find((checklist) => checklist.id === this.params()?.get('id'))
  );
}