Angular Signals: What? Why? and How?
Vložit
- čas přidán 27. 07. 2024
- An exciting new feature is coming to Angular: signals! Starting in Angular v16, Angular developers can leverage the power of signals to create more reactive applications. Signals provide a new way for our code to inform our templates (and other code) that our data has changed, offering more granular control over how and when updates are propagated and improving change detection.
So, what are signals? Why would you want to use a signal? How do you create, read and change a signal? And how do you define a computed signal? Watch this video for details and a demo of these cool new features!
Links
My completed Stackblitz: stackblitz.com/edit/angular-s...
Content
00:00 Introduction to Angular Signals
00:51 Why use signals?
03:58 What are signals?
06:16 How to create signals?
06:34 Where to use signals?
06:54 Creating a signal
09:10 Reading a signal
09:14 Setting a signal
11:18 Signal methods: set, update, mutate (NOTE: mutate is no longer an option, use update)
12:06 Defining a computed signal
13:14 Using an effect for side effects
14:36 Signals and templates
15:15 Current state of signals
15:36 Suggestions for how to use signals
16:00 Demo
NOTES
* There is a typo on the slide at time code 2:12. The exPrice = price * quantity calculation should be exPrice = this.price * qty.
* 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 CZcams 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 CZcams content: / @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #angularsignals #signalsinangular #angulartutorials #rxjsandsignals #signalsandrxjs #angulartutorial #signals #signalsangular #angularsignalsexample #angular16 #angularsignal #learnangular #angular16signals #angularsignalsrfc #signalsangularapp #angularv16 #signalsfordatasharinginangular #signalsexampleangular #angularsignalsdeepdive #angularsignalstutorial #signalsangulartutorial #signalstutorialangular #bestpractices #demo - Věda a technologie
Deborah, we are so blessed to have you in the Angular community!!!
Thank you so much! 🙏
@@deborah_kurata I sincerely appreciate your time and knowledge you shared.
Spot on. As a constantly struggling Angular adopter, Deborah has been one of the most valuable resources I've had. Her Plural Sight courses are phenomenal.
It's unbelievable the time and effort you put in your tutorials, Deborah. We appreciate you - always!
Thank you so much! 😊
I absolutely love your way of teaching. I can only guess how much effort you have to put in to make it this tasty for the rest of us. Bow of respect. Kind Regards.
Thank you very much! Yes, it takes several days to put one of these together. So glad to hear that the videos are useful!
Oh my goodness! Aren't you the best Angular tutor on youtube?! Honestly, you clearly standout. Please continue with your teaching style. Thank you Deborah
Wow, thank you! That is very kind of you to say! 😊
Thank you for your clear and concise explanations. You make Angular concepts easy to understand.
Glad it was useful! Thank you!
This is pure gold, Deborah. Congrats!
Thank you!
Thank you Deborah, you are so talented at explaining concepts.
Would love to see videos related to standalone APIs and non-destructive hydration as well.
I'll add standalone APIs to my list! 😀
I don't have much experience with SSR, so I'm not that knowledgeable in its hydration nor how it's changing. So I may not be able to tackle that one any time soon. :-)
Oh yesss! I'm so happy you made a video about signals. Everything seems so much easier when you explain it! That's a rare talent. I'm a big fan 😊
Thank you so much! Great to hear it was helpful! 😊
I second this !!! Why I didn’t know about your courses earlier 😊
Thank you Deborah for updating. Your videos are very easy to understand and useful.
Thank you for the kind words.🙏 Glad you found the video useful!
Best Signal tutorial i have seen so far! Weldone!
Wow, thanks! Glad it was helpful!
Great stuff, @Deborah! Thanks for the update!
Thank you! I'll be doing more as more features are added to signals.
I'm planning on doing a signal Observable video as soon as the from/to features are implemented in Angular (hopefully v16?)
What a brilliant way to explain this!
I love how you explain each concept wich such a good examples!
Thank youuu, now it's very clear to me this exciting mew feature!
Thank you so much! It's great to hear that the video was useful!
Wow, This video is absolutely awesome! The content is explained so clearly and straightforwardly. Thank you!
So glad to hear it's useful! 😊 Thanks!
❤So good to find these tutorials on CZcams!
Glad they were useful! Thank you! 🙏
you are a great great teacher deborah 👍 you always break things down in a way that makes it easy to get the bigger picture so just wanted to say thank you for your work 😁
Thank you so much! Glad it was helpful! 😊
The best signals explanation that a find, always clear. Thank you
Thank you so much! 😊
Can't wait for v16 release!
Agreed! They just announced that it is expected to be released May 3.
This the best signals tutorial I have ever seen
Thank you Debora
Wow, thank you! Glad it was helpful!
Thanks a lot Deborah for this amazing video.
Perfectly explained.
Glad you enjoyed it! Thanks for watching!
Wow. That was amazing. Concise and crystal clear!
Great to hear. Thanks!
Fantastic explanation 🙌🏻. Thanks a lot Deborah
Thank you so much! Glad it was useful!
This looks wonderful. Thanks for the clear well explained examples.
Great to hear. Hope it is useful. Thanks!
The best explanations always come from you!!!!!
Thank you so much! Great to hear it was useful!
Hi Debora, hope you are fine. Thanks for being so respectful with so well spoke and pronounced English. Most popular CZcamsrs actually speak so fast that they seem to be talking to walls. For people that don't have English as a frist Language, listening to them is just an activity of entertainment, but listening to people like you, is a profound and spectular oportunity to learn and grow. Thanks for being so respectful not just with the so carefully and well-prepared work, but with quality knowledge you have!
Thank you so much!
Terrific explanation!! thanks, i can't wait to see more content, Greetings from Colombia!
Greetings! Thank you for the kind words!
Great video Deborah! Thank you
Thanks! And thank you for watching!
Thank you very much, Deborah. Your videos are very helpful, even for people who don't speak English very well. Everything is very well explained, step by step.
So glad to hear they are useful. Thank you! 😃
best explanation of signals so far... thank-you miss @Deborah Kurata for sharing with us..
So glad it was helpful! Thanks for watching!
Thank you! This is the best video about signals I have found
Thank you so much! 🙏
Instant subscription! What a beautiful way to explain.
😊 Great to hear! Thank you so much!
Best Signals video ever! Thank you!
Wow, thanks! Glad to hear it's useful!
Hey. Thanks a lot four your work! You explain the topic very well!
Hey! Thank you for the kind words! 😊
As you are teaching, using RxJS in programming makes the code simpler, more readable, and easier to maintain. However, after discovering the Signal feature recently introduced in Angular, I realized what an amazing technology it is. Through your lectures, I learned that it can make programs even more elegant and improve readability.
Once again, thank you for creating such valuable lectures.
I'm so glad to hear that these videos have been useful. Thank you for watching!
It's a clearest explanation of signals
Thank you! 🙏
Thanks for explaining this -- as always, it's a pleasure to learn from you.
Small tip: in VS Code, and also in StackBlitz, when you want to replace the same value in multiple places (like you did for the Angular version), you can select one of the instances and press Shift + Ctrl + L --> it will select all of them. Then, as soon as you start typing the new value, it will be done at once, changing all that instances.
Thank you for the kind words. 😀
Great tip. I knew it worked in VS Code, I didn't realize that Stackblitz supported the feature as well. (I guess I should have known as I believe Stackblitz is VS Code on the inside.)
Thank you so much for sharing this tip! 🙏
Awesome video. Thank you so much
Great to hear! Thanks!
Signal is value + notification change. This will bring less boilerplate code with the internal reactive code of the component .instead of observable which requires subscription each time value is needed. Thanks @Deborah 🎉
Yep! But you'll probably still see Observables in services to handle http requests and other async operations.
as always very fantastic explanation on this topic... 👋👋
That is kind of you to say. Thank you.
Great Tutorial, that makes life simpler.
So great to hear that. Thank you!
The only video that really explains it well
Thank you so much!
Best Angular tutor!!!
Thank you for this as well! 😊
Thanks i've understand the concept and see how much sigals can be usefull
Glad it was helpful! Thanks for watching!
thanks for your effort , i hope to see videos related to micro frontend in angular
Thanks for watching! I'll add that to my list. Thanks!
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
your videos are great. thank you. 😀
Glad you like them! Thank you!
I'm feeling like I'm in plurlsight, thanks for share your knowledge Deborah
Thank you for watching!
Signal is I think a borrowed idea from knockoutjs (it's called observable in knockoutjs). Computed is a knockoutjs feature as well
It seems so. Have you see this? dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob
Signals seemed to me like angular is taking some lessons within react 😅 pretty amazing indeed. I worked a few years with Angular, but nowadays I'm working mostly with nextjs and it feels good to see my old boy getting these nice features.
Yep. They are definitely nice features!
AMAZING!
Thanks! 😊
Thank you well explaind
Thank you! 🙏🏼
Thank you very much for let us know🎉🎉🎉🎉🎉🎉
Great! Hope it's useful for you!
You are the best tutor I found so far... But how? Give some tips
I'm a big fan of your Pluralsight courses as well! There are so many of them I feel like I'll never keep up, LOL. I'm hoping that Angular can add these features such as signal, effect and compute without slowing down the responsiveness. I wonder if there are any numbers on that?
Thank you! 🙏
Signals will improve responsiveness ... especially if you create signals for all of your bound properties and turn on OnPush change detection.
In a future version of Angular, signals will improve responsiveness even further by allowing for "zone-less" change detection. (zone.js is what Angular currently uses for change detection)
Love it
Excellent!
You are always the best... I hope to see you making a new , complete and in depth , Angular course for Pluralsight soon!
Thank you!
And I did! You can find my newest course on RxJS and signals here: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals
(Pluralsight won't allow me to update the "Angular Getting Started" course. 😥)
I loved it!
Excellent! Thanks!
Thanks so muck
Thank you for watching!
Please post more videos on angular. Thanks
I'm hoping to, thanks!
Big fan here!
☺
Very interesting content! Waiting more to comee :)
Great to hear! Thanks! 🙏
Thanks Deborah, I have not used Angular since version 2 but after hearing about Signals and the Standalone Components, I am seriously considering using Angular again.
Nice! Hope you have as much fun with these new features as I have!
All the best.
Thank you for the course. I used to follow all of your courses on pluralsight. Is this channel your main source of content now?
I still have courses on Pluralsight. And I'm working on a new Pluralsight course now. But most of my new content will be via this channel.
you are awesome
😊😊
Super
Thanks
I was just wandering... why using signal with array in ngFor in this case? Isn't that useful where we have more dynamically changing list of values?
Thanks very much Deborah for these tutorials - I have one quick question if you don't mind: Is exPrice recomputed on the change to its dependent signals or when it is accessed by the template (which is re-rendered based on other signals)? Thanks!
Thank you for watching.
Any computed is calculated the first time it's read. The value is then memorized and reused whenever it's read again.
When any dependent signal changes, the next time the computed is read it is recalculated. That new value is then memorized and reused whenever it is read again.
Is that what you were asking?
Very nice video. I am expecting your full Angular course on Udemy from beginning to advanced. I am sure that will be 5 star rated most popular course in Udemy history.
Thank you ... but I was not able to get past Udemy's identification requirements. And I've never figured out how to contact an actual person about it. So I have not been able to create a Udemy account.
Plus Pluralsight has non-compete agreements, so none of the Pluralsight content can be legally "copied" to other platforms.
Pluralsight does plan on retiring my Angular courses sometime later this year (which negates the non-complete), and at that point I plan to post at least some of the content on this channel. Would that be useful?
@@deborah_kurata That would be really useful. Thank you so much. 😍
Thank You so much, Mam, That was a very clear view of signals. I have one question How does it improves the changes detection strategy ?? Can you please make one video on this? Thank You.
Thank you for the kind words.
Angular's current change detection uses zone.js. There are several issues with zone.js as outlined here: github.com/angular/angular/discussions/49684
Here's a snippet from the link:
"The Zone approach isn't scalable.
Zone is based on monkey-patching platform APIs like setTimeout, Promise.then, and addEventListener. This lets Angular know when something has happened in the browser, and we can then schedule change detection to synchronize the UI with any potential model changes.
This approach has not scaled well. zone.js must be loaded before the application starts in order to patch its target APIs. This patching operation is not free, both in terms of bytes downloaded and milliseconds of load time. zone.js also has no idea which APIs the application will use, and must patch them just in case. As browsers add more and more APIs, the cost of this patching grows, as does the cost of maintaining zone.js.
Another major issue is that some platform APIs, such as async / await, are not monkey-patchable at all, requiring awkward workarounds or forced down-leveling.
While we can work to optimize zone.js and reduce these costs, we will never be able to eliminate them completely.
Zones are the root cause of many common pain points in Angular.
In looking back at 7+ years of Angular history and feedback, we've identified zone.js as a common root cause behind many developer experience or performance challenges.
The infamous ExpressionChangedAfterItHasBeenChecked error is often the result of violating Angular's assumptions of how data will flow in your application. Angular assumes that your data will flow from top to bottom along the view hierarchy. This assumption is rooted in how zone.js separates model updates from UI reconciliation, resulting in the potential for "unsafe" model updates.
Another issue we've noted is that zone.js can easily overreact to activity in an application, resulting in many unnecessary change detections. Often this results from third-party advertising, marketing, or analytics scripts being initialized in a way that runs their many timers or other actions in the Angular zone. In the worst cases, we've seen applications which do over 1,000+ change detections at startup. It's always possible to write code with performance problems, but zone.js makes it easy to create such issues unintentionally.
Developers are opting in to more fine-grained reactivity today
Many developers today use state management patterns or libraries that architect their data in a way where they can tell Angular exactly what changed. This usually takes the form of making components OnPush and using Observables together with the async pipe to mark components for check when state they depend on changes. Angular is capable of operating in this mode, but still relies on zone.js for top-down change detection. Thus, developers get some, but not all of the benefits of fine-grained reactivity, and still have to deal with the drawbacks of zone.js."
@@deborah_kurata Thanks Mam, for your reply I will go through it, What great timing .. Angular team also running live on youtube about the Signal RFC. 🙂 Thank You
In the same component, The function/requirement could be implemented via existing API only the constructor can't be notified of the update for the variables? Hope for more videos. Thanks.
Could you elaborate? I'm unclear on your question.
Hi Deborah, as always thank you for the detailed explaination. It is always a pleasure to listen to you.
However I have a question which isn't related to signal.
At @20:01 at line number 14 you used $any(event.target).value. What does this expression specifically $any part means ?
Thank you for the kind words.
The $any requirement is a bit new, starting when Angular defaulted to strict typing throughout.
You can find out more about $any here: angular.io/guide/template-typecheck#troubleshooting-template-errors
It basically says: "Sometimes a binding expression triggers a type error during AOT compilation and it is not possible or difficult to fully specify the type." and "Use the $any() type-cast function in certain contexts to opt out of type-checking for a part of the expression".
This basically generates: (event.target as any).value
By casting it to "any", we can access its .value without a type error.
Does that help?
@@deborah_kurata Thank you very much for the explanation. It is something new that I discovered. 😃😃
I had to use a differ to detect change in an object (dictionary) type variable. Does signal detect change in object without extra bits of code?
You shouldn't need extra code. Could you do a stackblitz to demo your scenario?
In Angular 17, the mutate method doesnt work anymore. What's the alternative for it in Angular 17?
Correct. Now you can use the update method instead. I have some examples here: czcams.com/video/wcn_8UnYBEw/video.html
My favorite Angular teacher. ❤
Hey Deborah, what about manage async signals states? Like state is loading, state is success or state has error? Example you want update a vehicle price but to know some discount you need to call a http get.
Thank you! ☺
Have you seen this video: czcams.com/video/5SD995zKvbk/video.html
Does it answer your question?
@@deborah_kurata I just watched it! Great explanation and the final code is clear and cleaner. Thanks.
you are so talented,
awesome explaination, thanks so much.
do you have courses for design pattern / algorithm / data structure?
Thank you so much!
I had given thought to doing content on data structures, but I wasn't sure how much interest there would be in those topics.
Do you have specific topics you'd like to see?
i am not sure, but i believe it would be amazing
1. data structure and algorithm.
2.design pattern.
Hi Deborah , I see signals to be so similar to behavior subjects !! Does this mean Angular is eventually trying to get rid of zone.js?
Yes ... eventually... that's one of the goals.
Hi Deborah
thank you for your wonderful video
there is a misunderstanding for me about the update and mutate
could you describe what is difference between update and mutate?
Update changes the signal itself.
In this example we are removing the 5 from the signal and replacing it with a 10.
counter = signal(5);
constructor() {
this.counter.update((value) => value * 2);
}
The mutate changes one of the signal elements or properties without changing the signal itself.
In this example, we aren't replacing the signal. It's still an array of 6 numbers. Instead, we are mutating the first element of the array and changing it to 100.
numbers = signal([0, 1,2,3,4,5]);
constructor() {
this.numbers.mutate(value => value[0] = 100);
}
Note that in most cases, you can achieve the same result of the mutate with an update if you want to replace the entire array.
The following code achieves the same as the mutate shown above:
this.numbers.update((value) => [100, ...value])
But it marks the entire array as changed instead of just one array element. How that might affect change detection is not clear at this point because the Angular team has not yet implemented specialized change detection for signals.
@@deborah_kurata Thank you for your valuable response.
The earth needs people like you☘️
Are there already any standards (generally accepted rules) for writing variable names for signals?
There have been some discussions about this. I have not seen any generally accepted rule, however.
Some devs have been using a suffix (such as countSig), which personally I don't care for. Reminds me of the old Hungarian notation.
Some devs have been prefixing it with a $, so $count. Personally, I don't really care for that either. But some developers have found this useful.
Someone even suggested double $$, so count$$, which I think could be very confusing. :-)
hi Deborah, how can I update a signal from another component?
Move the signal to a service, inject the service, and then it can be updated from any component.
could you make a video about input signal with data from the server ? and thanks in advance
The purpose of a "signal input" is to pass data from a child component to a parent component. Or do you mean a signal set of data retrieved from the server?
If you mean the later, I have several videos on using Angular signals with RxJS (to retrieve data from the server). Consider starting with this one: czcams.com/video/MQwn1cGJ5z0/video.html
It looks more like mobx is there any possible use case to use signals with ngrx. Nice video by the way. Well explained.
Check this out: dev.to/ngrx/announcing-ngrx-v16-integration-with-angular-signals-functional-effects-standalone-schematics-and-more-5gk6
thank you@@deborah_kurata
If i used the signal getter directly in the template will it leads to multiple calls in angular ?.//we should avoid calling methods/getter from our template because the method will be called every time change detection runs right ?
The signal getters are no different from accessing a normal property value. The general rule of not calling methods/getters from the template was primarily to prevent running code within the getter or method. For a signal getter, we can't add any code. If we use a computed signal to add some code, then the value is memoized, so it isn't re-executed/recalculated unless the related data changes.
The Angular team sees signals as the future of very efficient change detection, so I'm sure they've worked diligently to ensure the signal getters are efficient.
Does that answer the question?
@@deborah_kurata Thankyou Very much
Hi Deborah, thank you so much for sharing. I have few questions;
what about unsubscrıbing?
Does ıt keep lıstening always:
when to use sıgnal or observable (RxJs)?
why Signal came up , because of less syntax?
There is no "subscribe", so no need to "unsubscribe". The component signals will keep listening until the component is destroyed. If the signal is in a service, the service will keep listening until that service's injector is destroyed.
Signals are primarily for managing change detection for the UI. So here's the flow:
- User kicks off an operation (such as selecting a customer from a list).
- Action is processed in an event handler (like it is now), something like onCustomerSelected() that is called via event binding in the template.
- The action may kick off an async process in a service, such as retrieving data based on that Id. That will continue to be done with RxJS/Observables.
- The resulting data could be returned from the service as a signal.
- The signal is bound to the UI, so the data appears to the user.
The only real difference from what we do now is that instead of the service returning an Observable, it could return a Signal. That could be bound directly in the UI instead of needing an async pipe.
The first part of the video attempts to explain why ... to provide more reactive programming (computed() for example) and to provide improved change detection.
Does that answer the questions?
Thanks for the tutorial. Once the page gets forcefully refreshed (F5), all the signal/subject values are getting cleared. How to fix this ? . Please help.
A refresh reloads the entire application and all of its internal state. There is no way to prevent that.
If you need to retain the values on a reload, you need to write the values out to somewhere (a backend server or local storage) and then re-read the values in when the application is reloaded.
@@deborah_kurata when I tried to update Signal at effect getting error message like this. please suggest. Writing to signals is not allowed in a `computed` or an `effect` by default. Use `allowSignalWrites` in the `CreateEffectOptions` to enable this inside effects.
Yeah, the recommended practice is to not update a signal in an effect because it could potentially cause an infinite loop. If you really need to, you can do exactly as the error message says and use the effect options to set allowSignalWrites.
Would Signals replace NgRx, or it is a completely different feature?
Signals are completely different from NgRx. Though NgRx has been modified to take advantage of the new signals features.
See this: dev.to/this-is-angular/signals-what-this-means-for-ngrx-eho
what's the difference between update and set?
Set just assigns a new value.
this.filterSignal.set(newFilter);
Update gives you the existing value, so you can manipulate it.
this.filterSignal.update(currentFilter => currentFilter.toLocalLowerCase());
Did that help answer the question?
What's happend woth RX and subscriber/observables then,Are Angular team going to get rid of them?
Signals are synchronous and primarily for keeping our UI updated with changes to data in our component.
RxJS/Observables are for asynchronous operations, such as retrieving data via http. That won't change and won't go away.
There will be methods such as fromObservable() that will take an Observable and convert it to a signal for display in the UI.
You can think of it more like that signals will replace the async pipe. Like the async pipe, the fromObservable() will automatically subscribe/unsubscribe to the Observable.
Does that answer the question?
thanks, what about the new life cycle hooks?
I didn't cover them yet because AFAIK, they aren't all implemented yet. They are still in RFC (Request for Comment) stage.
You can find out more about the proposed lifecycle changes here: github.com/angular/angular/discussions/49682 under the topic of "Component lifecycle and effects"
NOTE: I *did* cover `effect()` in the video which is also discussed in this section.
NOTE: Even though all of the lifecycle hooks are shown in the above referenced document as functions within the constructor, many of them can be defined declaratively as shown with the `effect()` in this video.
@@deborah_kurata thanks Debora!!
Hi, thank you . i dont't get why only the last of the 3 '.set(value)' is detected by the effect.
JavaScript/TypeScript is single threaded. Only one set of code can run at a time.
When the event handler code is running, it will continue running until the end. Since all of the event handler code ran *before* the effect code runs, the current value is the last value that was set.
When the event handler code execution is complete, other code (such as the effect) can run. The effect is notified that a signal has changed, but is not *given* that changed value. Rather, when the effect executes, it reads the current value from the signal itself.
Did that help?
@@deborah_kurata Ok but i really thought that using 'set', 'update' or 'mutate' would trigger the effect prior (or parallel) to the next line of code. It would be totally reactive in this way. What do you mean by the 'event handler code' : a function called next to the trigger of an event, or a general javascript mechanism ?
Since JavaScript is single threaded, it will finish executing any code in a function before it runs anything on the "callback queue".
By "event handler code", I mean this:
onQuantitySelected(qty: number) {
this.quantity.set(qty);
// Does not "emit" values, rather updates the value in the "box"
// The qtyEff effect will not be called until the next tick
// It only displays the latest value.
this.quantity.set(5);
this.quantity.set(42);
}
I found a cool JavaScript flow visualizer here: latentflip.com/loupe
Try it out. Try changing the "on" event handler to include code like this:
$.on('button', 'click', function onClick() {
setTimeout(function timer() {
console.log('You clicked the button!');
}, 500);
for (let x = 0; x < 10; x++) {
console.log(x);
}
});
You'll see it run through and queue up the setTimeout until the loop at the bottom is finished. *THEN* it will run the callback within the setTimeout and display "You clicked the button!".
An effect() is run similarly.
Let me know if you found that visualizer useful.
@@deborah_kurata Ok it displays "you clicked the button!" if we open the console. I searched for it on the web page. i have to keep in mind the "callback queue". Thank you again
2:12 the computation should be,
exPrice = price * qty
not
exPrice = price * quantity
Yep. You are correct. Thanks for pointing that out!
AFAIK, there is no way to edit a YT video once it's been posted. But I can add it to the video notes.
Thanks again!
@@deborah_kurata Yes, you can edit a CZcams video that you have uploaded, as long as you are signed in to your CZcams account. Here are the steps to edit your video:
Sign in to your CZcams account and go to your channel's Video Manager.
Find the video that you want to edit and click on the Edit button.
You will be taken to the Video Editor, where you can trim, split, add or remove sections, add music, and make other changes to your video.
After you have made your edits, click on the Save button to save the changes.
Once you have saved the changes, the edited video will be processed and replaced on CZcams. Please note that the video URL and statistics associated with the video will remain the same.
It's important to note that if your video has already been monetized, re-uploading an edited version may affect your monetization status. Also, if the video has been live for a while and has accumulated views, editing it may affect its search rankings and visibility. So, it's a good idea to carefully consider the changes you want to make before editing a video that has already been published.
I see options to:
- Trim & Cut
- Blur
- Audio
- End screen
- Info cards
I don't see any option to actually *add* anything. So it looks like I could cut out the error, but not replace it with a correction. AFAIK, I can't even add a callout pointing to the typo.
Since this error really doesn't impact the training in the video on signals, it doesn't seem worth trying to fix it. I did add it to a NOTE in the description.
Thanks!
This video shows What and How, but not why. All the example shows here can be replaced with plain out javascript object. How does it improve change detection? Can we remove zone.js with Signal? I didn't see it the demo here.
The why:
- Signals provide reactivity. Using computed signals, a value can react to changes in its dependent signals. This allows you to build a shopping cart, for example, that automatically recalculates the extended price, subtotal, taxes, delivery fees, and so on. This makes it much easier to have data react to changes in other data in your application. This functionality could *not* easily be replaced with a plain old JavaScript object. You'd have to build a bunch of setters.
- Signals currently provide improved change detection using OnPush. They *will* (in the future) provide for zone-less change detection. But I didn't demo that because that feature is not yet implemented.
Singular Angles
😄
9:58 this is not true. Signals will only notify its LIVE consumers (i.e. component templates or effects). For others situations the link between producer and consumer is owned by the consumer, thus the consumer value will be updated the next time it is read, not when the producer changes its value.
Thank you for the video! If we have sequentially this.quantity.set(5) and this.quantity(42) czcams.com/video/oqYQG7QMdzw/video.html why don't effect() display intermediate value? Is there an internal timer?
Thank you for watching!
JavaScript is single threaded. It won't execute the effect code until the prior code block that sets the quantity is complete. Then when the effect does run, reading the signal *only* reads the current value, not any prior value.
@@deborah_kurata I see, thank you! Sorry for stupid question:)
@@daniilevsienko4060 No problem. And, as they say, there are no stupid questions! 🙂
stop buying comments!!!
Is that a thing? Not sure of your point?
What: What motivates an RxJs expert to change to Signals?
Why: Why does an RxJs expert exchange a powerful technology like Rxjs with just a getter/setter function what Signals really are?
How: How can an RxJs expert be convinced to give away his swiss army knife for a hammer?
Not sure what I said that gave you that impression? I have no plans to give up RxJS and Observables. You'll have to pry them from my cold, dead hands. 😀
Signals are for sync operations. We are exchanging the async pipe with a bound signal. Anything async (like http requests and complex data manipulation) will still be RxJS.
I didn't include the RxJS/Observables in this video because the `fromObservable` and `fromSignal` needed to display the Observable values in the UI aren't yet in place. I did get a "fake" version of those methods and have an example of signals with RxJS here: stackblitz.com/edit/angular-y9goji
I plan to turn the above linked example into a separate video as soon as the `fromObservable` and `fromSignal` features are available in the v16 preview.