Bind Route Info to Component Inputs - Angular 16 New Router feature

Passing router information to routed component inputs is a new feature introduced in Angular v16 that simplifies the process of retrieving route information in components. In previous versions of Angular, developers had to inject the ActivatedRoute service and access route information using its properties and methods. With the new feature, route information can be directly bound to component inputs, eliminating the need for injecting ActivatedRoute.

Let's take a closer look at how this feature works.

In Angular, when building applications, we often use the Router to render different pages for different URLs. We also load data based on path parameters or query parameters associated with the URL.

Currently, if we want to access route information in a component, we need to inject the ActivatedRoute service and retrieve the desired information from its properties. For example, if we have a component that needs to read the query parameters from the URL to fill a search form, we would do something like this:

typescript
const routes: Routes = [
  {
    path: "search",
    component: SearchComponent,
  },
];

typescript
@Component({})
export class SearchComponent implements OnInit {
    private route = inject(ActivatedRoute);

    query$ = this.route.queryParams.pipe(
        map((queryParams) => queryParams['q'])
    );

    ngOnInit() {
        this.query$.subscribe(query => {
            // Do something with the query
        });
    }
}

In the above example, we inject the ActivatedRoute service into the component and use it to retrieve the query parameters. Similarly, we can access path parameters, data, and resolved data using the ActivatedRoute service.

However, in Angular v16, a new feature will be introduced to simplify this process. We will be able to directly pass the route information to component inputs, eliminating the need for injecting the ActivatedRoute service. 

Here's how it will work:

typescript
const routes: Routes = [
  {
    path: "search",
    component: SearchComponent,
  },
];

typescript
@Component({})
export class SearchComponent implements OnInit {
    /* 
        We can use the same name as the query param, for example 'query'
        Example url: http://localhost:4200/search?query=Angular
    */
    @Input() query?: string; // We can use the same name as the query param

    /* 
        Or we can use a different name, for example 'q', and then we can use the @Input('q')
        Example url: http://localhost:4200/search?q=Angular
    */
    @Input('q') queryParam?: string; // We can also use a different name

    ngOnInit() {
        // Do something with the query
    }
}

In the above code snippet, we define an input property query in the component and bind it to the query parameter. Now, when the component is rendered as part of a routed URL, the value of the query parameter will be automatically passed to the component's query input property.

We can also pass path parameters, data, and resolved data to component inputs:

typescript
const routes: Routes = [
  {
    path: "search/:id",
    component: SearchComponent,
    data: { title: "Search" },
    resolve: { searchData: SearchDataResolver }
  },
];

typescript
@Component({})
export class SearchComponent implements OnInit {
    @Input() query?: string; // This will come from the query params
    @Input() id?: string; // This will come from the path params
    @Input() title?: string; // This will come from the data
    @Input() searchData?: any; // This will come from the resolved data

    ngOnInit() {
        // Do something with the query, id, title, and searchData
    }
}

In the above example, we bind the query input property to the query parameter, id to the path parameter, title to the data, and searchData to the resolved data. The route information will be automatically passed to these input properties when the component is rendered.

To enable this feature, we need to configure the RouterModule with the bindToComponentInputs option:

typescript
@NgModule({
  imports: [
    RouterModule.forRoot([], {
      // Other configuration options
      bindToComponentInputs: true // Enable this feature
    })
  ],
})
export class AppModule {}

Alternatively, if you're using a standalone application, you can enable it during application bootstrap:

typescript
bootstrapApplication(App, {
  providers: [
    provideRouter(routes, 
        // Other configuration options
        withComponentInputBinding() // Enable this feature
    )
  ],
});

Migrating to the new API is straightforward. Remove the ActivatedRoute service injection from the component constructor and add the @Input() decorator to the properties you want to bind to route information. Also, make sure to enable the bindToComponentInputs feature as mentioned above.

Conclusion: The introduction of this new feature in Angular v16 simplifies the process of retrieving route information in components. It reduces the dependencies on the ActivatedRoute service and provides a more streamlined way to work with route data in Angular applications.

Read more :

1. Best Front-End Programming Languages that You Should Know About

2. What is signals in Anglaur 16?Example

3. DestroyRef Angular 16 - How DestroyRef Made Develpoer's Life Easier

4. What is Hydration in angular 16?

5. Angular 16 & 17 — game changer or loss of identity?