bug(Input): Inside router-outlet model bindings' default values are lost using withComponentInputBinding()

[szoboszlaypali]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

As seen in the stackblitz reproduction of the issue default options provided with [(ngModel)] through a model() are not applied to inputs (mat-chip-listbox, mat-checkbox, mat-select, matInput) inside a component projected through the router-outlet if the app is set up with withComponentInputBinding().

This isn't the case with variable and reactive control binding, and it isn't the case if the input is outside of the router-outlet.

I don't know if the issue was present in earlier Angular/Material versions.

It looks like the issue is present in both zoneless and zone based settings, and regardless of the ChangeDetectionStrategy.

Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-ikly5d7d?file=package.json,src%2Fmain.ts,src%2Findex.html

Expected Behavior

The inputs should be populated with the default option regardless if they are in a router-outlet or not.

Actual Behavior

Something sets the models to undefined in the process.

Environment

• Angular: 20.3.2
• CDK/Material: 20.2.5
• Browser(s): Google Chrome 140.0.7
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[szoboszlaypali]

It looks like this is somewhat of a documented behavior https://angular.dev/api/router/withComponentInputBinding

when an input does not have an item in the route data with a matching key, this input is set to undefined. This prevents previous information from being retained if the data got removed from the route (i.e. if a query parameter is removed). Default values can be provided with a resolver on the route to ensure the value is always present or an input and use an input transform in the component.

So a workaround is to

• set the default values in the route definition instead of inside the component,
• wrap the component with the inputs/models into a component without inputs (and the router then points to the wrapper, and leaves the inputs of the inner component alone),
• not use model inside components to which a route points

Either way it's kind of bad that there's no way to tell withComponentInputBinding to exclude a given model. The behavior doesn't even respect the protected keyword, and there's no warning or anything.

[atscott]

This is working as expected and is documented explicitly in the feature as noted.

Either way it's kind of bad that there's no way to tell withComponentInputBinding to exclude a given model

Please open a feature request

The behavior doesn't even respect the protected keyword

Not sure what that means exactly. Inputs can be protected, but are all settable in the binding API. There’s no such thing as an input that cannot be set.

and there's no warning or anything.

Input bindings have no type safety through the createComponent API and the router itself has no type safety on routed components and data

angular/angular#58940
angular/angular#38559

Closing as working as expected and covered by other issues (minus the feature request proposal)