Angular 16 Get Routing Parameters with @Input

With the introduction of Angular 16, developers now have a more straightforward method for accessing information about the current route. This new feature allows you to retrieve the current routing parameters via the @Input, decreasing the amount of boilerplate code necessary dramatically.

Previously, to access information about the current route, you have to inject ActivatedRoute into the component and utilize the snapshot property to extract the route parameters.

Now this is simply done as follows.

The new method greatly simplifies the procedure. All you have to do now is declare an input property with the parameter name, as seen below.

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css'],
})
export class ProfileComponent {
  @Input() id!: string;
}

This new feature allows you to retrieve the current routing parameter via the @input property, which provides an alternate and more simplified method of obtaining the information.