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.
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
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. :-)
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, Deborah. Your videos are very helpful, even for people who don't speak English very well. Everything is very well explained, step by step.
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.
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!
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! 🙏
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 🎉
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! 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?)
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. 😥)
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.
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)
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.
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?
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?
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.
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. :-)
Hello Deborah, thank you for the video very informative. I just have difficult time understanding what's the point of signals VS a normal variable. In the example you showed, It looked to me like if we replaced the signals with variables the same results will be achieved (other than the effect). What problem does signal solve?
There are several benefits, but first let's be pragmatic about the future. When the value of a normal variable in a component is changed, Angular's change detection detects that change and updates any bindings to that variable in the template. This works because Angular depends on zone.js for change detection. Angular is currently moving away from using zone.js for change detection. So in the not-too-distant future, signals may be the only way to get automatic change detection. Value changes to normal bound variables won't automatically change in the template. (Though there is a way to force change detection yourself) In addition, signals provide reactivity. One of the most exciting features are computed signals. You can declaratively define a signal that automatically changes based on another signal. Like these: total = computed(() => (this.selectedVehicle()?.price ?? 0) * this.quantity()); color = computed(() => this.total() > 50000 ? 'green' : 'blue'); And bind to these variables in the template like this: Total: {{ total() }} Whenever the user selects a different vehicle or the quantity of them they want to buy, the total and color are automatically recomputed and display in the template. Check out this video for more examples of how computed signals can simplify your code: th-cam.com/video/kczkl2HndJg/w-d-xo.html Does this help make the case for signals?
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.
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
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.
Yes. (Though it was already dropped in v17) The team determined that anything you could do with mutate you could also do with update. So having two and trying to explain when to use one vs the other wasn't worth it. (I wish there was a way to update the YT video to state this. Best I can do is note it in the comments.)
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?
One question- Whatever the function that she performed within computed function could be done in the event handler function also right? So, What is the difference?
In a more realistic application, there could be a number of events that could cause the extended price to change. For example, if the user increases the number of items or if the user selects a different item (with a different price). Instead of repeating that code in numerous events, we make the code "declarative" and specify how the variable should change directly when we declare it using a computed property. Another example, if we had a total price that would recalculate if the user changed the shipping location (shipping cost changes), or modified the number of ordered items (quantity changes) or adds/removes items from the list. We wouldn't want repeated code in each of these possible events. Rather, we define how the variable is calculated directly when we declare it. This makes the code less repetitive, more clear, and often easier to read. Often, we use a simple application to demonstrate a technique in order to keep the focus on the technique. But the benefits of the technique are often more obvious as an application gets more full featured/complex. Did that help?
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: th-cam.com/video/MQwn1cGJ5z0/w-d-xo.html
In general, the recommendation is not to. But for effects, there may be times we don't have another option. So take care and consider using untracked where it makes sense.
@@deborah_kurata If i select an value from dropdown, and the component property 'currentSelectedItem' gets updated, I need to call an api which I am currently calling in the event handler function. Can I move this api call to effect? (But I want to make sure the effect runs only when the dependent variable 'currentSelectedItem' updates) In general, can I use it like useEffect(() => {...some functionality}, [depVar1, depVar2]); which can be done in React?
The current recommendation is to not use effect for async operations. I assume your API call is async? The team is still working on effect (it's still in developer preview) and we hope that some of these issues will be resolved. See this for more information: angular.dev/guide/signals#effects
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.
Hi , I hope this message finds you well. I am currently working on a project using PrimeNG and I need some assistance. Could you please guide me on how to configure the PrimeNG Calendar to display the year in the Buddhist calendar (B.E.) instead of the Gregorian calendar? Your expertise and help would be greatly appreciated. Thank you in advance for your support. Best regards,
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
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?
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
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?
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.
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?
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.
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! 😊
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, 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. :-)
This the best signals tutorial I have ever seen
Thank you Debora
Wow, thank you! Glad it was helpful!
Deborah, your mode to explain concept is excellent!
Thanks 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!
❤So good to find these tutorials on TH-cam!
Glad they were useful! Thank you! 🙏
Best Signal tutorial i have seen so far! Weldone!
Wow, thanks! Glad it was helpful!
Hi ! I just started my new job and i didn't know anything about this nor did i understand. Thank you so much Deborah!! You're the best
Congrats on the new job. Glad this was helpful! All the best!
It's unbelievable the time and effort you put in your tutorials, Deborah. We appreciate you - always!
Thank you so much! 😊
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! 😃
Can't wait for v16 release!
Agreed! They just announced that it is expected to be released May 3.
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!
Thank you for your clear and concise explanations. You make Angular concepts easy to understand.
Glad it was useful! Thank you!
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!
This is pure gold, Deborah. Congrats!
Thank you!
The best signals explanation that a find, always clear. Thank you
Thank you so much! 😊
Wow, This video is absolutely awesome! The content is explained so clearly and straightforwardly. Thank you!
So glad to hear it's useful! 😊 Thanks!
best explanation of signals so far... thank-you miss @Deborah Kurata for sharing with us..
So glad it was helpful! Thanks for watching!
I'm so blessed to know your channel ❤
You are so kind! Thank you! 😊
Wow. That was amazing. Concise and crystal clear!
Great to hear. Thanks!
Thanks a lot Deborah for this amazing video.
Perfectly explained.
Glad you enjoyed it! Thanks for watching!
The only video that really explains it well
Thank you so much!
It's a clearest explanation of signals
Thank you! 🙏
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!
Terrific explanation!! thanks, i can't wait to see more content, Greetings from Colombia!
Greetings! Thank you for the kind words!
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! 🙏
OMG, what an amazing class!
Tks, it helped me a lot!
⭐⭐⭐⭐⭐
So glad to hear that! Thank you!
Thank you! This is the best video about signals I have found
Thank you so much! 🙏
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.
The best explanations always come from you!!!!!
Thank you so much! Great to hear it was useful!
This was really a awesome way of teaching, thanks :)
Glad it was helpful! 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! 😊
Great video Deborah! Thank you
Thanks! And thank you for watching!
Best Signals video ever! Thank you!
Wow, thanks! Glad to hear it's useful!
Fantastic explanation 🙌🏻. Thanks a lot Deborah
Thank you so much! Glad it was useful!
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?)
Best Angular tutor!!!
Thank you for this as well! 😊
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
Instant subscription! What a beautiful way to explain.
😊 Great to hear! Thank you so much!
This looks wonderful. Thanks for the clear well explained examples.
Great to hear. Hope it is useful. Thanks!
amazing explanation, thank you very much !
Thank you! Signals are a "game changer" for Angular!
Great Tutorial, that makes life simpler.
So great to hear that. Thank you!
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'm feeling like I'm in plurlsight, thanks for share your knowledge Deborah
Thank you for watching!
Hey. Thanks a lot four your work! You explain the topic very well!
Hey! Thank you for the kind words! 😊
as always very fantastic explanation on this topic... 👋👋
That is kind of you to say. Thank you.
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!
Really you are very very great thank you are the best one i loved your organized way and simplicity really thanks my dear
Thank you so much 😊
Thanks i've understand the concept and see how much sigals can be usefull
Glad it was helpful! Thanks for watching!
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!
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)
You have a new subscriber🎉
Yay! Thank you! 😊
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.
Awesome video. Thank you so much
Great to hear! Thanks!
You are the best tutor I found so far... But how? Give some tips
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.
Thanks ,for your nice videos !
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
Please post more videos on angular. Thanks
I'm hoping to, thanks!
your videos are great. thank you. 😀
Glad you like them! Thank you!
thanks a lot! great explanations!
Glad it was useful! Thank you for watching!
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. 😃😃
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?
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.
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. :-)
Thank you very much for let us know🎉🎉🎉🎉🎉🎉
Great! Hope it's useful for you!
Very interesting content! Waiting more to comee :)
Great to hear! Thanks! 🙏
Hello Deborah, thank you for the video very informative. I just have difficult time understanding what's the point of signals VS a normal variable. In the example you showed, It looked to me like if we replaced the signals with variables the same results will be achieved (other than the effect). What problem does signal solve?
There are several benefits, but first let's be pragmatic about the future. When the value of a normal variable in a component is changed, Angular's change detection detects that change and updates any bindings to that variable in the template. This works because Angular depends on zone.js for change detection. Angular is currently moving away from using zone.js for change detection. So in the not-too-distant future, signals may be the only way to get automatic change detection. Value changes to normal bound variables won't automatically change in the template. (Though there is a way to force change detection yourself)
In addition, signals provide reactivity. One of the most exciting features are computed signals. You can declaratively define a signal that automatically changes based on another signal. Like these:
total = computed(() => (this.selectedVehicle()?.price ?? 0) * this.quantity());
color = computed(() => this.total() > 50000 ? 'green' : 'blue');
And bind to these variables in the template like this:
Total: {{ total() }}
Whenever the user selects a different vehicle or the quantity of them they want to buy, the total and color are automatically recomputed and display in the template.
Check out this video for more examples of how computed signals can simplify your code: th-cam.com/video/kczkl2HndJg/w-d-xo.html
Does this help make the case for signals?
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.
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?
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☘️
I request you to kindly add videos about unit testing signals
Great idea. I keep expecting to see more guidance on testing signals coming from the Angular team ... so I've been waiting for that.
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 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: th-cam.com/video/wcn_8UnYBEw/w-d-xo.html
AMAZING!
Thanks! 😊
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!!
Is the mutate method of signal dropped off in V18?
Yes. (Though it was already dropped in v17) The team determined that anything you could do with mutate you could also do with update. So having two and trying to explain when to use one vs the other wasn't worth it.
(I wish there was a way to update the YT video to state this. Best I can do is note it in the comments.)
Big fan here!
☺
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. 😍
Love it
Excellent!
Great lessons, it's hard to understanding signals form another soruce, for that I watch the topics form women👌
Glad it was helpful!
One question- Whatever the function that she performed within computed function could be done in the event handler function also right? So, What is the difference?
In a more realistic application, there could be a number of events that could cause the extended price to change. For example, if the user increases the number of items or if the user selects a different item (with a different price). Instead of repeating that code in numerous events, we make the code "declarative" and specify how the variable should change directly when we declare it using a computed property.
Another example, if we had a total price that would recalculate if the user changed the shipping location (shipping cost changes), or modified the number of ordered items (quantity changes) or adds/removes items from the list. We wouldn't want repeated code in each of these possible events. Rather, we define how the variable is calculated directly when we declare it. This makes the code less repetitive, more clear, and often easier to read.
Often, we use a simple application to demonstrate a technique in order to keep the focus on the technique. But the benefits of the technique are often more obvious as an application gets more full featured/complex.
Did that help?
I loved it!
Excellent! Thanks!
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.
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: th-cam.com/video/MQwn1cGJ5z0/w-d-xo.html
Is it advisable to update a signal within computed function or an effect?
In general, the recommendation is not to.
But for effects, there may be times we don't have another option. So take care and consider using untracked where it makes sense.
@@deborah_kurata If i select an value from dropdown, and the component property 'currentSelectedItem' gets updated, I need to call an api which I am currently calling in the event handler function. Can I move this api call to effect? (But I want to make sure the effect runs only when the dependent variable 'currentSelectedItem' updates)
In general, can I use it like useEffect(() => {...some functionality}, [depVar1, depVar2]); which can be done in React?
The current recommendation is to not use effect for async operations. I assume your API call is async?
The team is still working on effect (it's still in developer preview) and we hope that some of these issues will be resolved.
See this for more information: angular.dev/guide/signals#effects
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.
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?
Thank you well explaind
Thank you! 🙏🏼
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
Hi ,
I hope this message finds you well.
I am currently working on a project using PrimeNG and I need some assistance. Could you please guide me on how to configure the PrimeNG Calendar to display the year in the Buddhist calendar (B.E.) instead of the Gregorian calendar?
Your expertise and help would be greatly appreciated.
Thank you in advance for your support.
Best regards,
I have not used PrimeNG, so don't have the expertise to help you with that. Maybe try PrimeNG support or stackoverflow?
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
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, 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
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.
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: th-cam.com/video/5SD995zKvbk/w-d-xo.html
Does it answer your question?
@@deborah_kurata I just watched it! Great explanation and the final code is clear and cleaner. Thanks.
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?