Add routes to the application

This tutorial lesson demonstrates how to add routes to your app.

IMPORTANT: We recommend using your local environment to learn routing.

What you'll learn

At the end of this lesson your application will have support for routing.

This tutorial introduces routing in Angular. Routing is the ability to navigate from one component in the application to another. In Single Page Applications (SPA), only parts of the page are updated to represent the requested view for the user.

The Angular Router enables users to declare routes and specify which component should be displayed on the screen if that route is requested by the application.

In this lesson, you will enable routing in your application to navigate to the details page.

Create a default details component
1. From the terminal, enter the following command to create the DetailsComponent:
```
      ng generate component details
    
```
  This component will represent the details page that provides more information on a given housing location.

Add routing to the application

In the src/app directory, create a file called routes.ts. This file is where we will define the routes in the application.

In main.ts, make the following updates to enable routing in the application:

Import the routes file and the provideRouter function:

Import routing details in src/main.ts

      /* *  Protractor support is deprecated in Angular. *  Protractor is used in this example for compatibility with Angular documentation tools. */import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';import {AppComponent} from './app/app.component';import {provideRouter} from '@angular/router';import routeConfig from './app/routes';bootstrapApplication(AppComponent, {  providers: [provideProtractorTestingSupport(), provideRouter(routeConfig)],}).catch((err) => console.error(err));

Update the call to bootstrapApplication to include the routing configuration:

Add router configuration in src/main.ts

      /* *  Protractor support is deprecated in Angular. *  Protractor is used in this example for compatibility with Angular documentation tools. */import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';import {AppComponent} from './app/app.component';import {provideRouter} from '@angular/router';import routeConfig from './app/routes';bootstrapApplication(AppComponent, {  providers: [provideProtractorTestingSupport(), provideRouter(routeConfig)],}).catch((err) => console.error(err));

In src/app/app.component.ts, update the component to use routing:

Add a file level import for RoutingModule:

Import RouterModule in src/app/app.component.ts

      import {Component} from '@angular/core';import {HomeComponent} from './home/home.component';import {RouterModule} from '@angular/router';@Component({  selector: 'app-root',  imports: [HomeComponent, RouterModule],  template: `    <main>      <a [routerLink]="['/']">        <header class="brand-name">          <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />        </header>      </a>      <section class="content">        <router-outlet></router-outlet>      </section>    </main>  `,  styleUrls: ['./app.component.css'],})export class AppComponent {  title = 'homes';}

Add RouterModule to the @Component metadata imports

Import RouterModule in src/app/app.component.ts

      import {Component} from '@angular/core';import {HomeComponent} from './home/home.component';import {RouterModule} from '@angular/router';@Component({  selector: 'app-root',  imports: [HomeComponent, RouterModule],  template: `    <main>      <a [routerLink]="['/']">        <header class="brand-name">          <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />        </header>      </a>      <section class="content">        <router-outlet></router-outlet>      </section>    </main>  `,  styleUrls: ['./app.component.css'],})export class AppComponent {  title = 'homes';}

In the template property, replace the <app-home></app-home> tag with the <router-outlet> directive and add a link back to the home page. Your code should match this code:

Add router-outlet in src/app/app.component.ts

      import {Component} from '@angular/core';import {HomeComponent} from './home/home.component';import {RouterModule} from '@angular/router';@Component({  selector: 'app-root',  imports: [HomeComponent, RouterModule],  template: `    <main>      <a [routerLink]="['/']">        <header class="brand-name">          <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />        </header>      </a>      <section class="content">        <router-outlet></router-outlet>      </section>    </main>  `,  styleUrls: ['./app.component.css'],})export class AppComponent {  title = 'homes';}

Add route to new component

In the previous step you removed the reference to the <app-home> component in the template. In this step, you will add a new route to that component.

In routes.ts, perform the following updates to create a route.

Add a file level imports for the HomeComponent, DetailsComponent and the Routes type that you'll use in the route definitions.

Import components and Routes

      import {Routes} from '@angular/router';import {HomeComponent} from './home/home.component';import {DetailsComponent} from './details/details.component';const routeConfig: Routes = [  {    path: '',    component: HomeComponent,    title: 'Home page',  },  {    path: 'details/:id',    component: DetailsComponent,    title: 'Home details',  },];export default routeConfig;

Define a variable called routeConfig of type Routes and define two routes for the app: