liveBook · Manning

bindToComponentInputs

As explained in Pro Angular 16

bindToComponentInputs is an Angular router configuration option that enables route values to be assigned to component input properties.

Enables Angular routing to assign route values directly to matching component input properties, removing the need to read them through ActivatedRoute. Inputs are populated before ngOnInit runs, so initialization logic can consume the assigned values. section 24.3.2

Enable route-to-input binding

Configure the router with RouterModule.forRoot(routes, { bindToComponentInputs: true }). A route such as { path: "form/:mode/:id", component: FormComponent } then supplies mode and id to matching @Input() properties. FormComponent can set editing from mode and parse id before loading the selected product.

Account for the practical behavior of the binding:

  • Route values arrive as strings, so boolean and numeric component state requires explicit conversion. section 24.3.2
  • The feature changes how values are extracted, not the application’s behavior. section 24.3.2

How Pro Angular 16 covers it

How deep it goes
Explains configuration, initialization timing, multiple parameters, and type conversion without descending into router internals.
Examples
Uses form routes with mode and id values, product editing links, and optional name, category, and price parameters.
What it assumes
Assumes Angular routes and component inputs, while demonstrating route-value extraction and string conversion in initialization.
What you can do after
Apply it by enabling RouterModule configuration and declaring matching component inputs for routed values.
How it connects
Connects Angular router configuration with route parameters, component inputs, ngOnInit, and dynamic routerLink expressions.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.