Angular Labs
COOKIES

Update Task Route

Git diff Branch
Chapter Objectives
  • Configure update route

    Set up routing for the task update functionality.

  • Handle route parameters

    Learn how to pass and retrieve task ID in routes.

  • Implement route guards

    Add protection to ensure valid task updates.

Route Configuration

So far, you have defined 2 route paths:

  • '' for the TaskList component to display the list of tasks
  • 'add-task' for the AddTask component to display a form

The update path is quite different because you don’t just want to go to a new page. To update a task, you need to know which task to update.

A common way to provide information to a routed component is to use a dynamic routing path.

Create the Route

The new path will be update/:id. The update part is static but the :id part is dynamic.

Note

The :id part is a route parameter. You can chain multiple route parameters in a path, for example 'update/:id/:name'. Each is prefixed with a colon : followed by an arbitrarily chosen name.

You won’t create a dedicated component for the update functionality. The purpose of TaskForm component is to create tasks with user input and update them. Let’s update the component to handle both creation and updating.

  1. Update the file src/app/app.routes.ts.

    app.routes.ts
    // ...
    

    export const routes: Routes = [
      { path: "", component: TaskList },
      { path: "add-task", component: TaskForm },
    

      { path: "update/:id", component: TaskForm },
    ];

Update the Navigation

Add a link in the TaskList component to access the TaskForm component with the id of the task to update. By accessing this path, you will extract the id value from the URL in the next chapter.

  1. Update the file src/app/task-list/task-list.html.

    @for (task of tasks; track task.id) {
    <tr>
      <td>{{ task.title }}</td>
      <td>{{ task.createdAt | date }}</td>
    

      <td>
        <a class="btn btn-primary" [routerLink]="['/update', task.id]">Update</a>
      </td>
    </tr>
    }

The routerLink value expects a string or an array of URL segments. In our situation, the routerLink value is an array of two elements:

  • /update is a string, the static part of the path.
  • task.id is the dynamic part of the path, the id of the task to update.

Test it

  1. Click the ‘Update’ link on the first task in the list.

  2. Check the URL: http://localhost:4200/update/d8ecfcda-ef70-420f-8236-3138ff64ac9f for example.

  3. The TaskFormComponent form is displayed correctly.

What you've learned

In this chapter, you learned how to add a route to update a task in an Angular application. You learned how to define a dynamic routing path to pass the id of the task to update. You also learned how to use the routerLink directive to access the TaskFormComponent and pass the id of the task to update.

← Previous Lesson
Component Destruction
Next Lesson →
Update Task Form