[SOLVED] Angular 16: Can't get route input binding to work

Angular 16: Can't get route input binding to work

Angular 16 introduced a new way to easily parse route information and I wanted to utilize it since it avoids boilerplate code. However, I just can't get it to work and I'm not sure what I am doing wrong.

As described in their documentation I added the new option to the router initialization:

@NgModule({
  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Afterwards I added the @Input() binding to my app.component.ts file:

@Input() settings_id? = '';

  public ngOnInit(): void {
    if (this.settings_id !== '') {
      console.log(this.settings_id); <-- this doesn't fire since string remains "empty"
    }
  }

According to all the (limited) resources I am able to find online this should already be sufficient. The URL I am calling is http://localhost:4200?settings_id=2a39962d-c3c5-4ade-8a0f-1b7f97279a58

Solution

This component input binding only works on routes of the router :

  providers: [provideRouter([
    { component: ChildComponent, path: 'test'} // will work on ChildComponent
  ], withComponentInputBinding())],

But not on the root component.