Define a Route

Now that you've set up the app to use Angular Router, you need to define the routes.

In this activity, you'll learn how to add and configure routes with your app.

1. Define a route in app.routes.ts

   In your app, there are two pages to display: (1) Home Page and (2) User Page.

   To define a route, add a route object to the routes array in app.routes.ts that contains:

   • The path of the route (which automatically starts at the root path (i.e., /))
   • The component that you want the route to display

         
   import {Routes} from '@angular/router';import {HomeComponent} from './home/home.component';export const routes: Routes = [  {    path: '',    component: HomeComponent,  },];
       

   The code above is an example of how HomeComponent can be added as a route. Now go ahead and implement this along with the UserComponent in the playground.

   Use 'user' for the path of UserComponent.

2. Add title to route definition

   In addition to defining the routes correctly, Angular Router also enables you to set the page title whenever users are navigating by adding the title property to each route.

   In app.routes.ts, add the title property to the default route (path: '') and the user route. Here's an example:

         
   import {Routes} from '@angular/router';import {HomeComponent} from './home/home.component';export const routes: Routes = [  {    path: '',    title: 'App Home Page',    component: HomeComponent,  },];
       

In the activity, you've learned how to define and configure routes in your Angular app. Nice work. 🙌

The journey to fully enabling routing in your app is almost complete, keep going.