Routing to a Detail Page

We’re making some great progress now. We have the ability to create a todo, it can be stored as part of our applications “state” in memory using our service, and we can display todos stored in that service in our HomeComponent.

At the moment, we are only displaying the todos title property. Now we are going to create a detail page so that we can click on any of our todos to view its full details in another page. As I pointed out before, this is a bit of a silly example because there is such a small amount of information to see that we should probably just have it all on the home page. However, we are just doing this as an exercise in setting up a master/detail pattern.

Create the Detail Component

Let’s start by creating our DetailComponent. Like our HomeComponent, this component is going to be routed to (not used inside of another components template). Because we are routing to this component, we will consider it as another “feature” in our application and it will get its own folder (and its own route in the main routing file).

Create a new file and folder at src/app/detail/detail.component.ts

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

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

    <ion-content class="ion-padding"></ion-content>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DetailComponent {}

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

Add the following route for the DetailComponent in app-routing.module.ts:

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () =>
      import('./home/home.component').then((m) => m.HomeComponentModule),
  },
  {
    path: 'detail/:id',
    loadChildren: () =>
      import('./detail/detail.component').then((m) => DetailComponentModule),
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

We are routing to our DetailComponent now, but notice that we have specified an :id as a parameter. If we navigate to detail/12 the router will navigate to DetailComponent and the id value of 12 will be available to it to use.

Add an id property to Todo

Our todos don’t actually have an id property yet. Let’s add that now.

Modify the Todo interface to reflect the following:

export interface Todo {
  id: string;
  title: string;
  description: string;
}