-
Notifications
You must be signed in to change notification settings - Fork 24.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
model()
should support a narrower output type
#55754
Comments
This is a duplicate of #55166 which has the previous discussion (which concluded that |
model()
should support a narrower output type
I'm going to steal this issue and refocus it a bit. |
But how would you transform the string to the number for input values? At the end the component internally only want number and will always emit number. Only the outside can provide strings. |
You can use a |
But wouldn't something like |
@alxhub Just adding that using input and output we can do: value = input(2, { transform: fn });
valueChange = output<number>(); The only downside is we can't change it from inside and the outside must implement the output and input or two way binding. value = model(2, {inputTansform: fn}); Which does exactly the same but with model added features. |
After some discussion, we've decided that it's not really feasible to implement this feature. One, we (still) don't want to add Narrowing the setter type wouldn't work, as it would break the assignability of Given that both options produce tradeoffs that we don't feel strike the right balance, we don't think a change here makes sense. |
@alxhub so how do you suggest to implement it instead? Using input and output requires the consumer to use two way binding for it to work (btw isn't it the same as what was suggested here but without internal control?) |
Falling back to // Input with transform: signal of the internal value.
state = input(..., {transform: ...}); // InputSignal<Wide, Narrow>
// Output side of the two-way binding contract.
stateChange = output<Narrow>();
// Computed to project new input values to a WritableSignal, allowing internal mutations.
stateMutable = computed(() => signal(this.state())); // Signal<WritableSignal<Narrow>>;
// Actual value to use internally (unwrap the nested WritableSignal).
stateInternal = computed(() => this.stateMutable()()); // Signal<Narrow>
// Helper method to update the state (equivalent of `model.set()`).
setState(value: Narrow): void {
this.stateMutable().set(value);
this.stateChange(value);
} |
Thanks that's helpful! Just a shame that such a pattern can't be integrated in angular for easier implementation. Especially if there are multiple of those inputs. Models are such a clean way to do it. |
Which @angular/* package(s) are relevant/related to the feature request?
core
Description
Currently input supports transform but model doesn't although it can be very handy.
Proposed solution
Allow
model(2, {transform: fn})
For example if I can accept
number | '${number}'
from outside but emit onlynumber
.It allows the user to either use:
modelName="8"
without two way binding[(modelName)]="value"
with two way binding while value is onlynumber
Alternatives considered
Probably use
model<number | '${number}'>(2)
. But then inside I need to run the transform function myselfThe text was updated successfully, but these errors were encountered: