Using Angular Computed Signals for Cart Totals

Опубликовано: 14 Декабрь 2023
на канале: Deborah Kurata

8,715

391

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: https://github.com/DeborahK/Angular-S...

"Angular Signals: What, Why, and How?":    • Angular Signals: What? Why? and How?

"Working with Arrays in Angular Signals":    • Working with Arrays in Angular Signals

"RxJS and Angular Signal Fundamentals" - Pluralsight course: https://www.pluralsight.com/library/c...

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 YouTube 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: https://www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: https://www.freecodecamp.org/news/aut...
View my YouTube content:    / @deborah_kurata

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angularsignals #signalsinangular #angular #angulartutorial #signals #angularstateusingsignal #salesscreenusingangularsignals #productcartscreenusingangularsignals #angular16 #computedinsignal #signalsangular #angularsignaltutorial #signaltutorial #angular16signals #angularsignalsexamples #howtoupdatearrayinangularsignals #calculationinangularsignals #angularsignalsallyouneedtoknow #angularsignal