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
Add WritableComputed to allow computed with write operations #55673
Comments
Did you also consider splitting up your computation and writing logic? Something like the following: class Test {
value = input.required<string>();
writableValue = signal<string | undefined>(undefined);
computedValue = computed(() => this.writableValue() ?? this.value() + 1);
} IMHO Angular shouldn't offer a signal which is both computed and writable. It leads to ambiguity, you will never know whether the current value of the signal comes from the computation or from a signal write. Also when the input is updated, the previously set value will be reset, which I assume would be an unintended side effect. |
This won't reset neither |
class Test {
value = input.required<string>();
// the trick: project the input's value to a `WritableSignal` of that value.
// when the input changes, the inner `WritableSignal` will be replaced with a new one.
writableInnerValue = computed(() => signal(this.value()));
// helper to get rid of the double read
innerValue = () => this.writableInnerValue()();
setInnerValue(value: string): void {
// the WritableSignal allows for internal mutation
this.writableInnerValue().set(value);
}
} |
Or pulled out into a helper function: interface MirrorSignal<T> {
(): T;
set(value: T);
}
function mirror<T>(outer: Signal<T>): MirrorSignal<T> {
const inner = computed(() => signal(outer()));
const mirror: MirrorSignal<T> = () = inner()();
mirror.set = (value: T) => untracked(inner).set(value);
return mirror;
} |
Which @angular/* package(s) are relevant/related to the feature request?
core
Description
Revival with use case of #50498
Currently
signal
produces a writable signal.Currently
computed
produces a non writable signal.What I am missing is a
writableComputed
.Use case example:
I have a required input called
value
but inside the component I can edit this value without affecting the outside. At the end an apply button is clicked and I emit the new value via an output.Something like this:
The first problem is
tempValue
isn't based onvalue
.The second problem is when
value
is changed from outside. At this point I wish to discardtempValue
and start fresh with the newvalue
.If I had
writableComputed
I could do:Which means anytime
value
changes it becomes the newtempValue
value. IftempValue
is edited the new edit is thetempValue
new value until something gets changed invalue
.Proposed solution
A new
writableComputed
which tracks the value inside based on the writeable part and will get reset each time the computed function runs to what it creates.Examples:
Alternatives considered
Using effect. The downside is with required inputs.
This will result in
tempValue
havingundefined
initially and for example inngOnInit
it will still haveundefined
althoughvalue
already have the actual value set. Also a computed will have its value set too.using
writableComputed
inngOnInit
will have the correct computed value.Another option is that scenario hints that something I am doing is wrong from the basis and I would like to hear better suggestions how to handle it.
The text was updated successfully, but these errors were encountered: