Angular: routes and routing with parameters

  • Angular
  • Gabriele Romanato

Angular, a powerful front-end framework developed by Google, provides a robust routing mechanism that allows developers to create single-page applications (SPAs) with dynamic navigation. One essential feature of Angular routing is the ability to pass parameters to routes, enabling the creation of more flexible and interactive web applications.

Basics of Angular Routing

Angular's routing module enables developers to build applications with multiple views, where each view corresponds to a specific component. When a user navigates through different sections of the application, Angular's router helps in dynamically loading the appropriate components without requiring a full page reload.

To set up routing in an Angular application, developers need to import the RouterModule and configure routes in the app-routing.module.ts file. A basic route configuration might look like this:


// app-routing.module.ts

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: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

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

In this example, we've defined two routes - one for the home component and another for the about component. To navigate to these routes, we would typically use the routerLink directive in our application's templates.

Introducing Route Parameters

While the basic routing setup is crucial, applications often require more dynamic behavior, such as passing data to a component based on user input or other factors. This is where route parameters come into play.

Defining Routes with Parameters

To include parameters in a route, we can modify our route configuration to include a path segment preceded by a colon (:). For example:


// app-routing.module.ts

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

In this updated configuration, the about route now expects a parameter called id. This parameter can be any value, and Angular will capture it from the URL.

Accessing Route Parameters in Components

To access the route parameters in the target component (AboutComponent in this case), we can use Angular's ActivatedRoute service. This service provides information about the route associated with the component.


// about.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css'],
})
export class AboutComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // Accessing the route parameter
    const id = this.route.snapshot.params['id'];
    console.log('Route parameter id:', id);
  }
}

In this example, ActivatedRoute is injected into the AboutComponent, and within the ngOnInit lifecycle hook, we retrieve the value of the id parameter using this.route.snapshot.params['id'].

Navigating with Parameters

When navigating to a route with parameters programmatically, we can use the router.navigate method:


// some.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-some',
  template: '<button (click)="navigateWithParameter()">Go to About</button>',
})
export class SomeComponent {
  constructor(private router: Router) {}

  navigateWithParameter(): void {
    const id = 123; // Some dynamic value
    this.router.navigate(['/about', id]);
  }
}

In this example, when the button is clicked, the application navigates to the about route with the parameter id set to 123.

Conclusion

Angular's powerful routing capabilities, combined with the ability to work with route parameters, provide developers with the flexibility to create dynamic and data-driven single-page applications. By understanding how to define routes with parameters, access them in components, and navigate with parameters, developers can enhance the interactivity and user experience of their Angular applications.

Back to top