How to sync Angular input with signal store without using effect

Say I have a simple UserStore signal store with that simple state:

{ username: string }


Now I created one component UserComponent using that store, and this component has a signal input:

readonly #store = inject(UserStore);
username = input.required<string>();


What's the correct way to update my signal store when the component input value changes? So far I am using an effect:

constructor() {
effect(
() => {
const username = this.username();
this.#store.setUsername(username);
},
{ allowSignalWrites: true }
);
}


But looking at the angular docs, I do think that using an effect is to be avoided.

Continue reading...