How to Implement Routing in Angular

Routing in Angular allows you to navigate between different components in your app, enhancing user experience in Single Page Applications (SPA). By only updating parts of the page, Angular Router ensures smoother transitions between views without reloading the whole application.

Step 1: Create the Details Component

First, create a new component for the details page where users will view more information about a specific housing location.

What to do:

1. Open the terminal in your IDE.
2. Run the following command to generate the DetailsComponent:

ng generate component details --inline-template --skip-tests

This component will serve as the details page of your application.

Step 2: Set Up Routing in Angular

Now, you will define the routes and integrate routing into your Angular application.

What to do:

1. In src/app, create a new file named routes.ts. This file will hold the routing configuration for the app.
2. Open src/main.ts and import the necessary router modules:

import { provideRouter } from '@angular/router';
import routeConfig from './app/routes';

Modify the bootstrapApplication function to include the routing configuration:

bootstrapApplication(AppComponent, {
  providers: [
    provideProtractorTestingSupport(),
    provideRouter(routeConfig)
  ]
}).catch(err => console.error(err));

In src/app/app.component.ts, import RouterModule and update the component metadata:

import { RouterModule } from '@angular/router';

Add RouterModule to the @Component imports:

imports: [
  HomeComponent,
  RouterModule,
],

Replace the <app-home></app-home> tag in the template with the <router-outlet> directive and add a link to navigate back to the home page:

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>
`,

Step 3: Define Routes for Components

Now that routing is enabled, you will define the routes for your HomeComponent and DetailsComponent.

What to do:

1. Open src/app/routes.ts and import the HomeComponent, DetailsComponent, and Routes:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DetailsComponent } from './details/details.component';

Define the route configuration as follows:

const routeConfig: Routes = [
  {
    path: '',
    component: HomeComponent,
    title: 'Home page'
  },
  {
    path: 'details/:id',
    component: DetailsComponent,
    title: 'Home details'
  }
];

export default routeConfig;

This configuration specifies that when the path is empty (”), the app should load the HomeComponent. When the path includes details/:id, it will load the DetailsComponent with dynamic content based on the id.

3. Save all your changes and test the application in the browser to ensure that routing works correctly.

In this tutorial, you’ve successfully implemented routing in your Angular application. You:

• Created a new DetailsComponent.
• Set up Angular Router to navigate between components.
• Defined routes for the HomeComponent and DetailsComponent.

Now your app supports navigation between different views, making it more dynamic and user-friendly. In the next lesson, you will learn how to navigate to specific details pages using dynamic parameters.

Keep Learning 🙂