Simplify Routing Parameters in Angular Components
Tags: programming, angular
Published: 2023-12-29 15:00:00

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7wg14dyjjz29bqj9enn.png)

**Configure Route and RouterLink:**

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

```ts
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:

```ts
[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:

```ts
<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:

```ts
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!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlcwotjh4oi1dx4leikf.png)

**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](https://nhannguyen.hashnode.dev/)/
- **Linkedin:** https://www.linkedin.com/in/nhannguyendevjs/
- **X (formerly Twitter)**: https://twitter.com/nhannguyendevjs/