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 , significantly reducing the amount of boilerplate code required. @Input What's Changing? Previously, to obtain information about the current route, you needed to inject into the component and use the property to get the route params. ActivatedRoute snapshot 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 property, providing an alternative and more streamlined way to obtain the information. @input 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 to the function. withComponentInputBinding() provideRouter() 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 the property to true in the method. bindingComponentInputs RouterModule.forRoot() 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.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Angular Mastery: Reacting to Dynamic Input Parameter Changes

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Angular Mastery: Reacting to Dynamic Input Parameter Changes

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps