Manage State with Angular Signals

The new Angular signals are well suited to effectively manage the data we retain in our code.

We define state in our components to keep track of component-level data such as the user's desired sort order or current selected item.

We define state in our services to retain data used throughout the application, such as the list of vehicles for sale or the contents of the user's shopping cart.

When managing state, we often need to support CRUD (Create, Read, Update, Delete) operations on that data. In this video, we use signals to manage state, including CRUD operations.

Starting in Angular v16, Angular developers can leverage the power of signals to create highly reactive applications. Signals provide a new way for our code to inform our templates that data has changed, offering more granular control over how and when updates are propagated with change detection. If you aren't familiar with signals, consider watching my introductory signals video first. You can find the link below.

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

How Angular Signals and RxJS Work Together:    • How Angular Signals and RxJS Work Together  

Signal vs BehaviorSubject:    • Angular Signal vs BehaviorSubject  

Sample code: https://github.com/DeborahK/Angular-S...

Content
00:00 Managing component and service state
01:16 Sample application in action
03:05 Managing state with RxJS Observables
04:22 Managing state with signals
05:09 Creating computed signals
07:35 Performing CRUD operations
10:56 Accessing signals from components
11:20 Binding to signals
12:05 Completing the changes
13.21 Running to validate our changes
14:00 Benefits of using signals to manage state

NOTES
As of Angular v17, .mutate is no longer an option. Use .update instead.

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊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 10,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  

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #signals #bestpractices #angularsignals #signalsinangular #demo #signaltutorial #angular16 #rxjsandsignals #signalsandrxjs #signalvsbehaviorsubject #CRUD #statemanagement #statemanagementinangular