Angular Routing and Navigation: Configuring Routes

In the previous chapter, we explored the fundamental concepts of routing—including its definition, purpose, and how to implement basic routing in Angular. Now, we’ll delve deeper into configuring routes within an Angular application to enhance page navigation and overall user experience.

Basic Structure of Route Configuration

To configure routing in Angular, we define a route configuration array within the application module. Each object in this array represents a single route and typically includes the following properties:

• path: Defines the URL path for the route.
• component: Specifies the component to load when the path matches.
• redirectTo: Specifies a target path for redirection (optional).
• pathMatch: Defines the path-matching strategy (optional).

Here’s a simple example of a route configuration:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this example, we’ve configured three routes:

1. When users visit the root path (''), they are automatically redirected to /home.
2. Visiting /home loads the HomeComponent.
3. Visiting /about loads the AboutComponent.

Using redirectTo and pathMatch

redirectTo

The redirectTo property enables redirection from one path to another. In our configuration:

{ path: '', redirectTo: '/home', pathMatch: 'full' }

When users access the site’s root URL, the application automatically redirects them to /home.

pathMatch

The pathMatch property defines how Angular matches the URL against the route path. It accepts two possible values:

• full: The redirect occurs only when the entire URL path matches exactly (as shown in the example above).
• prefix: The redirect occurs if the URL starts with the specified path.

For instance, if pathMatch: 'prefix' were used, both /home and /home/about would match the /home route.

Configuring Child Routes

To build more sophisticated navigation structures, we can use child routes—routes nested within a parent route’s component. For example, the AboutComponent might contain additional sub-routes such as team and history:

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent, children: [
      { path: 'team', component: TeamComponent },
      { path: 'history', component: HistoryComponent }
    ]
  }
];

Inside the AboutComponent template, we use <router-outlet></router-outlet> to render child components at the appropriate location:

<h2>About Us</h2>
<nav>
  <a routerLink="team">Our Team</a>
  <a routerLink="history">History</a>
</nav>
<router-outlet></router-outlet>

Want to Learn More?

In this section, we covered foundational route configuration in Angular applications—including setting up basic routes, using redirects, and defining child routes. The routing system is a core part of Angular and essential for building dynamic, complex user interfaces.

In the next section, we’ll explore route parameters, which enable your application to handle dynamic data and URLs. By leveraging route parameters, you can dynamically load different content based on user input or context. Stay tuned!