Lesson 14 / 30

Setting Up Routes

Map URLs to components and navigate between them.

Defining routes

A route array maps a URL path to a component. provideRouter wires it into the app.

// app.routes.ts
export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductListComponent },
];

// main.ts
bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
});

routerLink

routerLink navigates without a full page reload, and <router-outlet> marks where the matched component renders.

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/products">Products</a>
</nav>
<router-outlet></router-outlet>