Since Angular 16 we can change the way parameters from URL work, until version 16 comes out we have done this with an activatedRoute, let's take a look at one of the cool features in this version.

How was it done before?

Once we have configured our route file with the parameters we want to pass to each of the URLs, we need to get those parameters into the component.

Let's look at an example:

import { ActivatedRoute } from "@angular/router";
export class UserComponent implements OnInit {
  activatedRoute = inject(ActivatedRoute);
  ngOnInit(): void {
    let paramId = this.activatedRoute.snapshot.paramMap.get('id');
  }
}

As you can see, first we need to import and inject the ActivatedRoute to use it, and then we need to obtain the param from ActivatedRoute, in this example the param calls id

How is it done now?

First of all, we need to add the route with the parameter that we need to send, this step is the same in the older way and in the new way.

export const routes: Routes = [
    {
        path: 'user/:id',
        loadComponent: () =>
            import('./user/user.component').then(c => c.UserComponent)
    }
];

For this example, we created a UserComponent and added an id in the URL.

To obtain parameters through URL using inputs we need to import the withComponentInputBinding() in our app.config.ts

import { withComponentInputBinding } from '@angular/router';
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withComponentInputBinding())]
};

Just import the withComponentInputBinding from angular/core and add to the providers, now Angular knows that we want to use input properties to read route parameters.

If you are still using modules in your application set bindToComponentInputs to true in your AppRoutingModule

In our component just need to add an input with the name of our parameter like this:

@Input() id!: string;

If we need to change the name and don't use the same parameter name we can rename the input like this:

@Input('id') paramId!: string;

Now we can obtain our parameter in the ngOnInit function without using the activatedRoute, we just need to use our variable from the input

  ngOnInit(): void {
    console.log(this.id);
  }

Using the new way we don't need to import and inject the activatedRoute and we write less code.

Angular automatically reads the route parameter and assigns it to the input property.

Remember that if you want to access the value of the parameter in the constructor, it will be empty, you need to access it in the ngOnInit.

Conclusion

In this article we have discovered a simple way to collect parameters from the URL, saving us code in a very simple way, I think that from now on we will leave behind the activatedRoute to do it this way.