Within the child component, there is a field called data that I modify upon clicking. Following this change, I want an effect to be triggered in the parent component to detect this alteration. Strangely, the effect does not activate when I update the model input in the child (although it works fine when adjusting the signal in the parent).
The code snippet for the child component looks like this:
export class ChildComponent {
data = model({} as Vm);
onClick() {
console.log("Click alters the data.");
// this.data.set(this.data());
this.data.update(a => a);
}
}
And here's the code for the parent component:
export class ParentComponent {
constructor() {
interval(1000).subscribe(a => console.log("poll: ", this.data()));
effect(() => { console.log("effect: ", this.data()) });
}
data = signal({} as Vm);
ngOnInit() { this.data.set(this.getData()); }
}
Initially, I observe an empty object displayed by the effect. Then, I witness the update from the parent’s initialization method. Additionally, I can see the value changed in the child being checked every second. However, the effect fails to trigger again, happening only twice as mentioned earlier.
I'm running out of ideas on how to troubleshoot this issue further. Checking the official documentation, it appears that it should work (and to some extent, it does!). Yet, I'm unsure if I am correctly implementing the modification within the child component.
(In the actual scenario, my goal is to only alter a field within an object contained in the array of the data model input. But before proceeding, I need to understand why neither set(...) nor update(...) activates the effect in the parent.)