Angular 17 child routes route params

In Angular 17, child routes allow you to organize your applications into a hierarchical navigation structure. They are defined in the routing configuration of a parent route and help in managing complex routing structures with ease. Route parameters are parts of the URL that you can capture and use to display dynamic content based on the path.

Angular17 came and if you are new then you must check below two links:

Here’s how you can work with Angular child routes and route parameters:

1. Defining Child Routes

Child routes are defined in the RouterModule of your Angular application, using the RouterModule.forRoot() method for root level routes or RouterModule.forChild() for feature modules. You define them in the children array of a route configuration.

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child/:id', // :id is a route parameter
        component: ChildComponent
      }
    ]
  }
];

In this example, ParentComponent has a child route that is associated with ChildComponent. The :id in the path child/:id is a route parameter that can be used to pass dynamic values.

2. Accessing Route Parameters

To access route parameters within your component, you use the ActivatedRoute service provided by Angular’s Router package. Specifically, you can subscribe to the params observable of ActivatedRoute to get the route parameters.

In ChildComponent, you can access the id route parameter like this:

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

@Component({
  selector: 'app-child',
  template: '<p>Child Component with ID: {{id}}</p>',
})
export class ChildComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params['id']; // Grab the id route parameter
    });
  }
}

3. Navigating to Child Routes with Parameters

To navigate to a child route with parameters, you can use the Router service’s navigate method or the routerLink directive in your templates.

Using Router service:

constructor(private router: Router) {}

navigateToChild() {
  this.router.navigate(['/parent/child', 123]); // Navigates to /parent/child/123
}

Using routerLink directive:

<a [routerLink]="['/parent/child', 123]">Go to Child</a>

4. Path Matching Strategy

For routes with parameters, Angular uses a first-match wins strategy. This means the router selects the first route that matches the URL from top to bottom. Ensure your route paths are ordered correctly to avoid unexpected behavior.

By using child routes and route parameters, Angular applications can implement sophisticated routing structures, making it easier to build complex and hierarchical navigation flows.

Tags:Angular 17