Angular 16: A New Way to Get Route Information in Angular

With the release of Angular version 16, developers have a simpler approach to obtaining information about the current route. This new feature allows you to access the current routing parameters through the @Input, significantly reducing the amount of boilerplate code required.

What's Changing?

Previously, to obtain information about the current route, you needed to inject ActivatedRoute into the component and use the snapshot property to get the route params.

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
  }
}

The new approach significantly simplifies this process. Now, all you need to do is declare an input property with the name of the parameter like this:

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 access the current routing parameter through the @input property, providing an alternative and more streamlined way to obtain the information.

How to Set up a New Feature?

The process of setting up a new feature in Angular can vary depending on how you are using it. If you are working with a self-running application, you can add withComponentInputBinding() to the provideRouter() function.

const routes: Routes = [
  { path: ":id", component: ProfileComponent }
]

bootstrapApplication(AppComponent, {
    providers: [provideRouter(routes, withComponentInputBinding())]
})
  .catch(err => console.error(err));

For classic NgModule bootstrapping, you need to set thebindingComponentInputs property to true in the RouterModule.forRoot() method.

const routes: Routes = [
  { path: ":id", component: ProfileComponent }
]

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes, {
   bindToComponentInputs: true
 })]
})
export class AppModule {}

What Can Be Obtained Through @Input?

The new feature enables the binding of all route data to a component using key-value pairs through component inputs. This includes static or resolved route data, path parameters, matrix parameters, and query parameters.

Conclusion

The introduction of this new way to obtain routing information in Angular has significantly improved the development experience. It simplifies the codebase, resulting in more concise, understandable, and readable code. Stay tuned for further enhancements and updates to enhance your Angular development journey.