Using Angular Computed Signals for Cart Totals

With Angular's new computed signals our data is reactive!
Computed signals derive their value from other signals. We perform a calculation or operation using one or more dependent signals. And the computed signal automatically recalculates as the dependent signals change.
That's why computed signals are one of the most powerful reactive features of signals.
In this video, we walk through how to use computed signals to react to cart changes. We'll calculate the cart totals and those values will *automatically* react and recalculate as needed.
*Links*
Code: github.com/DeborahK/Angular-Signals
"Angular Signals: What, Why, and How?": kzbin.info/www/bejne/paK8gnpthrKXsNk
"Working with Arrays in Angular Signals": kzbin.info/www/bejne/rZTRkGuLo751e9k
"RxJS and Angular Signal Fundamentals" - Pluralsight course: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals
*Content*
00:00 Angular computed signals
00:58 Creating the cart
01:22 Declaring the Computed Signals (Service)
03:35 Declaring the Signals (Component)
04:19 Confirmation
04:56 Wrap up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZbin content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
Contact me on Twitter: DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
View my KZbin content: www.youtube.com/@deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angularsignals #signalsinangular #angular #angulartutorial #signals #angularstateusingsignal #salesscreenusingangularsignals #productcartscreenusingangularsignals #angular16 #computedinsignal #signalsangular #angularsignaltutorial #signaltutorial #angular16signals #angularsignalsexamples #howtoupdatearrayinangularsignals #calculationinangularsignals #angularsignalsallyouneedtoknow #angularsignal

[@deepakkumarmohapatra4760]

Crystal clear example I have ever gone through on signals, Thanks Deborah for such nice explanation.😘

[@deborah_kurata]

Excellent! Thank you so much for the kind words!

[@zshn]

This is the best example I've seen so far regarding signals.

[@deborah_kurata]

Excellent! Thanks!

[@ali-13392]

Awesome video, thanks Deborah!

[@deborah_kurata]

Thanks!

[@d13g0m0r3n0]

Good to see more feature and scenarios with signal and continue using same app as previous examples

[@behzadkhosravanimajd]

Thank you so much, it is such a great tutorial. 🤗

[@deborah_kurata]

You’re welcome 😊 Thanks for watching!

[@metric152]

Life without zones is looking good. Thanks again for another straight forward tutorial

[@deborah_kurata]

Yes! And thank you!

[@rn.cslive]

Much time I working with angular in commercial application, booking online.., at the end, we have a better approaching to resolve the complexity when calculating the bill :)), thank angular signal, thank teacher.

[@deborah_kurata]

Excellent! Glad it has been useful!

[@paulecampbell]

I love your videos, yay!

[@deborah_kurata]

Your comment made me smile. Thank you for brightening my day!

[@paulecampbell]

@@deborah_kurata so happy I could do that🙂

[@user-hc1jk6ht1f]

thank you for the video 🙂

[@deborah_kurata]

Thank you for watching!

[@dreamvallyhasan4807]

Best Angular tutorial ever ..mis we want a large projects using .net core api, angular 17 + RDLC with you ..thanks from the bottom of my heart

[@deborah_kurata]

Thank you! All the best on your new project!

[@wesley_931]

Thanks again for the great explaination. I saw you inject the service. Why should I use this instead of constructor. Does it bring any benefits and when should I use the constructor? Thank you in advance

[@deborah_kurata]

Thank you for watching. One of the key benefits of the inject() vs the constructor parameter is that it is more clear and readable. We know from learning that adding a parameter to a constructor (but only if it has an accessibility prefix) sets up dependency injection. The inject keyword is clearly stating it's purpose: to inject a service. So as part of Angular's efforts to become more explicit and clear, it makes sense to use the inject() instead.

[@wesley_931]

@@deborah_kurata Aah allright, thanks for the explaination😁

[@haroldpepete]

great explantation, i have a simple question, are there any limit in the amount of computed signal in a component or whole application? so many computed signal could affect the performance! of the application?

[@deborah_kurata]

Thanks. There is no limit that I'm aware of. In terms of performance, computed signals are both lazy and memoized. They are lazy in that they don't calculate until they are read. So if you have a computed signal that is never used anywhere, it won't calculate/recalculate. Memoized means that once a computed signal is calculated, it caches the calculation and does not recalculate unless one of the dependent signals change. So if you use one computed signal 3 times in your template, it will calculate one time and reuse the cached value the other two times its used.

[@Stepanmc]

good explanation. The only thing - repetitive intonation accents(cadence) are annoying.

[@deborah_kurata]

Glad you liked the explanation. Yeah, I'm from Wisconsin and have that mid-Western drone-y tone. I wish I came from New Zealand or even Tennessee and had a more fun intonation/cadence. I keep thinking to myself ... if everyone hates my "real" intonation, maybe I should just go with AI audio? It would most certainly be faster.

[@deborah_kurata]

Just out of curiosity ... do you hear the same issue in this video: kzbin.info/www/bejne/m5m3epuHpc9sr9U