Simplify Routing Parameters in Angular Components

Configure Route and RouterLink:

I defined my app routes using :id to represent the parameter and components SampleComponent1, SampleComponent2:

const APP_ROUTES: Route[] = [
  {
    path: 'sample-1/:id',
    component: SampleComponent1,
  },
  {
    path: 'sample-2/:id',
    component: SampleComponent2,
  },
  {
    path: '',
    redirectTo: 'sample-1',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'sample-1',
  },
]

In my code, I added the routerLink directive to direct users to the sample pages, incorporating the URL, the parameter, and the query parameter:

[routerLink]="['/sample-1/', '1']" [queryParams]="{message: 'Sample Component 1 worked!!!'}"

// ...

[routerLink]="['/sample-2/', '2']" [queryParams]="{message: 'Sample Component 2 worked!!!'}"

In my template, it appears as follows:

<h1>Simplify Routing Parameters in Angular Components</h1>

<hr />

<h3>Routes</h3>

<p style="color: blue; text-decoration: underline; cursor: pointer;" [routerLink]="['/sample-1/', '1']" [queryParams]="{message: 'Sample Component 1 worked!!!'}">Sample Component 1</p>

<p style="color: blue; text-decoration: underline; cursor: pointer;" [routerLink]="['/sample-2/', '2']" [queryParams]="{message: 'Sample Component 2 worked!!!'}">Sample Component 2</p>

<hr />

<router-outlet />

Read The Router Parameter using Input with the Router Parameter

First, we must provide the withComponentInputBinding() function in the router config. It enables the binding of the input that matches the route parameter, in our case is id.

In the SampleComponent..., add the id property with the input decorator. To ensure the id is set, print it in the constructor.

The id is undefined, which causes the product to be requested with an undefined value because the id has not yet been set in the component. To access it, let's try reading it in the OnInit lifecycle.

The final code will look like this:

import { Component, Input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideRouter,
  Route,
  RouterModule,
  withComponentInputBinding,
} from '@angular/router';
import 'zone.js';

@Component({
  selector: 'app-sample-1',
  standalone: true,
  template: `
    <h1>ID: {{id}}</h1>
    <h1>Message: {{message}}</h1>
  `,
})
export class SampleComponent1 {
  @Input() id!: string;
  @Input() message!: string;
}

@Component({
  selector: 'app-sample-2',
  standalone: true,
  template: `
    <h1>ID: {{id}}</h1>
    <h1>Message: {{message}}</h1>
  `,
})
export class SampleComponent2 {
  @Input() id!: string;
  @Input() message!: string;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <h1>Simplify Routing Parameters in Angular Components</h1>

    <hr />

    <h3>Routes</h3>

    <p style="color: blue; text-decoration: underline; cursor: pointer;" [routerLink]="['/sample-1/', '1']" [queryParams]="{message: 'Sample Component 1 worked!!!'}">Sample Component 1</p>

    <p style="color: blue; text-decoration: underline; cursor: pointer;" [routerLink]="['/sample-2/', '2']" [queryParams]="{message: 'Sample Component 2 worked!!!'}">Sample Component 2</p>

    <hr />

    <router-outlet />
  `,
})
export class App {
  name = 'Angular';
}

const APP_ROUTES: Route[] = [
  {
    path: 'sample-1/:id',
    component: SampleComponent1,
  },
  {
    path: 'sample-2/:id',
    component: SampleComponent2,
  },
  {
    path: '',
    redirectTo: 'sample-1',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'sample-1',
  },
];

bootstrapApplication(App, {
  providers: [provideRouter(APP_ROUTES, withComponentInputBinding())],
});

Save the changes, and everything should work!

Recap

The feature withComponentInputBinding helps us avoid subscriptions and inject the route and get the values from the route easily.

I recommend checking out the official documentation:

• Angular documentation: https://angular.io/api/router/withComponentInputBinding
• Source code: https://stackblitz.com/edit/stackblitz-starters-qjmdxz?file=src%2Fmain.ts

---

I hope you found it useful. Thanks for reading. 🙏

Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/