2

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

hullunist
  • 1,117
  • 2
  • 11
  • 31
  • You probably need a route with :settings_id rather than the app component. For example, admin/:settings_id – ertucode May 16 '23 at 06:40
  • @ertucode I'm not trying to get a path param. Docs explicitly state that query params are also supported. – hullunist May 16 '23 at 06:42

1 Answers1

2

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.

Matthieu Riegler
  • 31,918
  • 20
  • 95
  • 134
  • Oh okay, I guess it makes sense that only routes directly handled by the Router have this functionality lol. Now it works as expected. – hullunist May 16 '23 at 07:58