feat(router): add unmatchedInputBehavior option to componentInputBinding

Introduce a new configuration option `unmatchedInputBehavior` to the `componentInputBinding` feature. This option allows users to configure the behavior when a component input is not matched by any key in the router data.

The available values are:
- 'alwaysUndefined': (Default) Always binds undefined to unmatched inputs.
- 'undefinedIfStale': Binds undefined only if the input was previously available in the router data for the active route in the outlet.

This feature addresses concerns raised in #63835 and #52946 regarding the retention of default values for inputs that were never targeted by the router, while still ensuring that stale data is cleared when a parameter is removed.
This commit is contained in:
Andrew Scott
2026-04-24 12:11:25 -07:00
committed by Alex Rickabaugh
parent aab7dd48c0
commit c84642ac16
5 changed files with 83 additions and 2 deletions
@@ -66,6 +66,28 @@ Use `ComponentInputBindingOptions` to disable query parameter binding if you man
provideRouter(appRoutes, withComponentInputBinding({queryParams: false}));
```
### Configure behavior for inputs not available in router data
By default, the router sets an input to `undefined` if it was not available in the router data during a navigation. This ensures that stale data is not retained.
If you want to avoid setting `undefined` for inputs that have _never_ been available in the router data for the active component instance, you can set the `unmatchedInputBehavior` option to `'undefinedIfStale'`:
```ts
provideRouter(appRoutes, withComponentInputBinding({unmatchedInputBehavior: 'undefinedIfStale'}));
```
When you combine `unmatchedInputBehavior: 'undefinedIfStale'` with `queryParams: false`, inputs retain their initial values unless they are explicitly provided by the router. The exception is matrix parameters: if a matrix parameter is provided in one navigation and removed in a subsequent one, the router will set the input to `undefined` to avoid retaining stale data.
```ts
provideRouter(
appRoutes,
withComponentInputBinding({
queryParams: false,
unmatchedInputBehavior: 'undefinedIfStale',
}),
);
```
### Inherit parent route data
By default, child routes inherit parameters and data from parent routes (equivalent to `paramsInheritanceStrategy: 'always'`). This means you can access parent route info directly in child components.