Updated signal value is delayed in child component, if the value is passed down as an `input()`

I have a service which maintains some state using a signal. The service also exposes an rxjs observable which emits when a certain event has taken place. This event takes place after the signal value has been updated.

I have a smart component which has a direct dependency on the service, and passes along the signal and the event to a child dumb component which reacts to the event by taking an action which is dependent on the current state value.

My issue is that because the signal from the service is passed down into the child component as an input(), it gets wrapped in a second signal, which delays the change detection, because it must propagate from the service to the smart component, and then from the smart component to the child component. So when the event fires in the child component, the signal input() hasn't updated its value yet - so it has a stale value.

This can be seen in my stackBlitz here. I have created 3 different iterations of the child component (a, b, and c).

• a: Follows the standard Angular input() pattern, and you can see its state value is always 1 update behind at the time of the event firing.
• b: Utilizes an Input() for the value, so the actual signal is passed down, rather than the signal's value.
• c: Utilizes an input(), but it too is given the signal, rather than the value from the parent.

Component B and C both get the correct values, but none of these patterns feel good to me. B is definitely the least offensive, but I don't think it will be apparent to most devs why this one particular input is using a decorator, when every other input in our codebase will be using an input() signal. Is there a better pattern that will address this issue?

Continue reading...