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

@Component({
  standalone: true,
  selector: 'app-detail',
  template: ` <h2>Detail</h2> `,
})
export default class DetailComponent {}

NOTE: Remember that we are using export default for our routed components.

Add the following route for the DetailComponent in app.routes.ts:

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

export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.component'),
  },
  {
    path: 'detail/:id',
    loadComponent: () => import('./detail/detail.component'),
  },
  {
    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, and it’s going to be a bit hard to navigate to them using their id when they do not have one. Let’s add that now.

Modify the Todo interface to reflect the following:

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

export type CreateTodo = Omit<Todo, 'id'>;

We’re getting a bit fancy with TypeScript now. We have been creating todos already under the assumption that all a todo has is a title and a string but now we have changed that by adding an id.

However, we don’t want the user to supply the id when creating the todo. We want that to do that automatically. That means that when a user is creating a todo we only want them to have to supply the title and description. But, when we are displaying the todos in the application we will need to also include the id.

To deal with this, now have two different types: Todo and CreateTodo. We are using the Omit utility type from TypeScript which allows us to use an existing type (in this case Todo) and then remove specific properties from it (in this case id) in order to create a new type.

Now the following structure data would satisfy a Todo:

{
  id: '1',
  title: 'hello',
  description: 'world'
}

and the following structure would satisfy a CreateTodo:

{
  title: 'hello',
  description: 'world'
}

Modifying the Todo type like this is going to cause some errors — you will see these in your code editor and also in the terminal where you are running ng serve. Let’s deal with that.

Update the TodoFormComponent such that it now emits the CreateTodo type:

  @Output() todoSubmitted = new EventEmitter<CreateTodo>();