Рет қаралды 14,592
Now that signals are available in Angular version 16, let's walk through how to use them in a more "real world" application.
We'll create signals and computed signals. We'll issue HTTP requests and emit the response using an RxJS Observable. Then create a signal from that Observable.
We react to signal changes and create an Observable from a signal. That way we can pipe the signal value through an Observable pipeline and retrieve data based on changes to that signal.
Because signals created from Observables are read-only, we also look at how to create writeable signals so we can modify our retrieved data.
This video is a live-coding demo. If you are new to Angular signals, check out my introductory signals video that covers the what, why, and how. You can find the link below.
Links
Angular Signals: What, Why, and How?: • Angular Signals: What?...
How Angular Signals and RxJS Work Together: • How Angular Signals an...
Signal vs BehaviorSubject: • Angular Signal vs Beha...
switchMap vs concatMap vs mergeMap ... Oh My!: • switchMap vs concatMap...
Sample code: github.com/DeborahK/Angular-S...
Content
00:00 Unlocking the Power of Angular Signals + RxJS
00:32 The application in action
01:12 The code for the application
01:33 Using the inject function
01:58 Creating and setting a signal in the component
03:58 Creating a signal from an Observable (HTTP GET)
06:59 Reacting to a Signal and issuing an HTTP GET request
11:30 Computed signals
13:40 Mutating a signal
13:58 toSignal is readonly!
15:38 Exposing signals in services
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊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 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: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
View my KZbin content: / @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #signals #bestpractices #angularsignals #angularsignal #signalsinangular #demo #signaltutorial #angular16 #rxjsandsignals #signalsandrxjs #signalvsbehaviorsubject #CRUD #statemanagement #statemanagementinangular