blog/angular-signals-push-pull

[giscus[bot]]

blog/angular-signals-push-pull

Let's take a deep dive into Angular signals and how they can be understood using the primitive push & pull concepts to make sense of all their behaviors from setting a value all the way to effects and laziness!

https://angularexperts.io/blog/angular-signals-push-pull

[adriano-nbfr]

Hi Tomas! Congratulations for your article. It's incredibly detailed. However, I still have a question about what would be the best approach for the following scenario. I have a global service that internally uses a private signal to store the content of one or more dynamic menus updated asynchronously during the resolve function configured in a Route. This service must be consumed in the template of each component (all onPush) to display the corresponding menu reactively. Currently, I only expose a getter in the service that reads the current value of the signal, preventing a component from being able to write directly to the signal and also to be accessed as a readonly property sintax. The question is: In this case, does the component template that reads the property (getter) still act as a ReactiveNode, or only when I read the signal value directly in the template? My tests suggest that this approach works even without interacting with the component, but I'm not sure if it's just the change detection mechanism itself acting up without me noticing. Additionally, I would like to know if it is a good practice (I don't think so) to expose a WritableSignal from a service, and what would be the ideal approach for this scenario. Create a computed() only for this readonly pourpose?

Thanks!

[adriano-nbfr]

Sorry, I've just found that asReadonly() is the answer to my last question.. But the first one remains: When called in a component template via property sintax, a getter exposed by a service that reads a value from a private signal acts as a consumer in the dependency graph of that signal?

[tomastrajan]

Hey hey @adriano-nbfr !

In this case, does the component template that reads the property (getter) still act as a ReactiveNode, or only when I read the signal value directly in the template?

As long as the template reads the signal value it is being added as a producer (signal) for the consumer (template) in the reactive graph because the template is consider live consumer

There it doesn't really matter if its:

counter = this.counterService.counter; // in tpl {{ counter () }}

// or

public counterService = inject(CounterService); //  in tpl {{ counterService.counter() }}

// or

public counterService = inject(CounterService); //  in tpl {{ counterService.getCunter() }} 
// which does it behind the scenes eg getCounter() { return this.counter() }

as long as it's the reference to the same signal, everything will work!

The way the signals works internally has clanged a bit since the release of the article, check out new video for the up to date explanation 👍

[adriano-nbfr]

Thanks for the response! After more experiments and more searchs, now its clear that the dependency is set on the fly, based on the last execution of the consumer (computed/effect/template).