The Checklist Detail Page

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.

Action

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

import { Component } from '@angular/core';
import {
  IonBackButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonTitle,
  IonToolbar,
} from '@ionic/angular/standalone';

@Component({
  selector: 'app-checklist',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button defaultHref="/"></ion-back-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content> </ion-content>
  `,
  imports: [
    IonContent,
    IonHeader,
    IonToolbar,
    IonButtons,
    IonBackButton,
    IonTitle,
  ],
})
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:

Action

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',
  },
];