Define routes

Chapter Objective

Define routes in your Angular application

Define routes

To display the desired content based on the URL, you need to add a path to each of your components in your routes array, for example:

{ path: 'add-task', component: TaskForm }

The path is therefore the URL that the user will access. For example, the path /add-task means that the user will navigate to the URL http://localhost:4200/add-task.

The provided component is the component that will be displayed in the router-outlet placeholder when the user accesses this URL.

The route definition resides in the app.routes.ts file.

src
└─ app
    └─ app.routes.ts

---

Instructions

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

   app-route.ts

   import { Routes } from "@angular/router";
   
   import { TaskList } from "./task-list/task-list";
   import { TaskForm } from "./task-form/task-form";
   
   
   export const routes: Routes = [
     { path: "", component: TaskList },
     { path: "add-task", component: TaskForm },
   ];

What you've learned

In this chapter, you learned how to define routes in your Angular application.