docs: improve docs for withComponentInputBinding

JeanMeche · JeanMeche · commit cb82f40aedca · 2025-05-26T17:20:09.000+02:00
Add mention about inputs potentially becoming `undefined`.
diff --git a/adev/src/content/guide/routing/common-router-tasks.md b/adev/src/content/guide/routing/common-router-tasks.md
@@ -11,7 +11,7 @@ To edit an item, users click an Edit button, which opens an `EditGroceryItem` co
 You want that component to retrieve the `id` for the grocery item so it can display the right information to the user.
 
 Use a route to pass this type of information to your application components.
-To do so, you use the [withComponentInputBinding](api/router/withComponentInputBinding) feature with `provideRouter` or the `bindToComponentInputs` option of `RouterModule.forRoot`.
+To do so, you use the [`withComponentInputBinding`](api/router/withComponentInputBinding) feature with `provideRouter` or the `bindToComponentInputs` option of `RouterModule.forRoot`.
 
 To get information from a route:
 
@@ -29,25 +29,44 @@ providers: [
 
 </docs-step>
 
-<docs-step title="Add an `Input` to the component">
+<docs-step title="Add an `input` to the component">
 
-Update the component to have an `Input` matching the name of the parameter.
+Update the component to have an `input` property matching the name of the parameter.
 
 ```ts
-@Input()
-set id(heroId: string) {
-  this.hero$ = this.service.getHero(heroId);
-}
+id = input<string|undefined>();
+effect(() => {
+  const heroId = this.id();
+  if(heroId) {
+    hero = this.service.getHero(heroId)
+  }
+});
 ```
 
-NOTE: You can bind all route data with key, value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters.
-If you want to use the parent components route info you will need to set the router `paramsInheritanceStrategy` option:
-`withRouterConfig({paramsInheritanceStrategy: 'always'})`
-
 </docs-step>
+<docs-step title="Optional: Use a default value">
+Binded inputs can be set to `undefined` when no route elements match. 
+In this situation, the router will overwrite the default value of the signal input.<br>
+It is recommended that such input reflect that by including `undefined` in the typing.
+
+You can provide a default value by either setting the `transform` option on the `input` or rely on a local state with `linkedSignal`.
+
+```ts
+id = input.required({
+  transform: (maybeUndefined: string | undefined) => maybeUndefined ?? '0',
+});
+// or
+id = input<string|undefined>();
+internalId = linkedSignal(() => this.id() ?? getDefaultId());
+```
 
+</docs-step>
 </docs-workflow>
 
+NOTE: You can bind all route data with key, value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters.
+If you want to use the parent components route info you will need to set the router `paramsInheritanceStrategy` option:
+`withRouterConfig({paramsInheritanceStrategy: 'always'})`
+
 ## Displaying a 404 page
 
 To display a 404 page, set up a [wildcard route](guide/routing/common-router-tasks#setting-up-wildcard-routes) with the `component` property set to the component you'd like to use for your 404 page as follows:
