Angular Signals: What? Why? and How?

[@184Simon]

Deborah, we are so blessed to have you in the Angular community!!!

[@deborah_kurata]

Thank you so much! 🙏

[@linamariabeltrandurango]

@@deborah_kurata I sincerely appreciate your time and knowledge you shared.

[@thenatedoggchannel9719]

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.

[@joeyvico]

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

[@deborah_kurata]

Wow, thank you! That is very kind of you to say! 😊

[@meeeh]

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 😊

[@deborah_kurata]

Thank you so much! Great to hear it was helpful! 😊

[@vidyas1545]

I second this !!! Why I didn’t know about your courses earlier 😊

[@haridulal9106]

This is by far the best video on angular signals that I have come across...thank you so much for the content....

[@deborah_kurata]

Thank you! I'm really glad you enjoyed it! 😊

[@_khaledg]

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.

[@deborah_kurata]

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. :-)

[@davidaimakhede1980]

Best Signal tutorial i have seen so far! Weldone!

[@deborah_kurata]

Wow, thanks! Glad it was helpful!

[@elioviaggi9701]

Deborah, your mode to explain concept is excellent!

[@deborah_kurata]

Thanks so much! 😊

[@wiliam334]

This the best signals tutorial I have ever seen Thank you Debora

[@deborah_kurata]

Wow, thank you! Glad it was helpful!

[@ikeeaz]

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

[@deborah_kurata]

Congrats on the new job. Glad this was helpful! All the best!

[@nikhilgoyal007]

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.

[@deborah_kurata]

Thank you very much! Yes, it takes several days to put one of these together. So glad to hear that the videos are useful!

[@deliailetchi9740]

❤So good to find these tutorials on KZbin!

[@deborah_kurata]

Glad they were useful! Thank you! 🙏

[@everyonesview]

It's unbelievable the time and effort you put in your tutorials, Deborah. We appreciate you - always!

[@deborah_kurata]

Thank you so much! 😊

[@marcosjrs]

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.

[@deborah_kurata]

So glad to hear they are useful. Thank you! 😃

[@mqb268]

Thank you Deborah for updating. Your videos are very easy to understand and useful.

[@deborah_kurata]

Thank you for the kind words.🙏 Glad you found the video useful!

[@rgarafulicm]

This is pure gold, Deborah. Congrats!

[@deborah_kurata]

Thank you!

[@YesDiscovery]

Thank you for your clear and concise explanations. You make Angular concepts easy to understand.

[@deborah_kurata]

Glad it was useful! Thank you!

[@jeanfrancoisgamache]

The best signals explanation that a find, always clear. Thank you

[@deborah_kurata]

Thank you so much! 😊

[@VinitNeogi]

Can't wait for v16 release!

[@deborah_kurata]

Agreed! They just announced that it is expected to be released May 3.

[@fieryscorpion]

Wow. That was amazing. Concise and crystal clear!

[@deborah_kurata]

Great to hear. Thanks!

[@sepidehmasoomi7044]

Wow, This video is absolutely awesome! The content is explained so clearly and straightforwardly. Thank you!

[@deborah_kurata]

So glad to hear it's useful! 😊 Thanks!

[@wonsupjung2527]

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.

[@deborah_kurata]

I'm so glad to hear that these videos have been useful. Thank you for watching!

[@fr_w_la710]

I'm so blessed to know your channel ❤

[@deborah_kurata]

You are so kind! Thank you! 😊

[@prathmeshjoshi8179]

Thanks a lot Deborah for this amazing video. Perfectly explained.

[@deborah_kurata]

Glad you enjoyed it! Thanks for watching!

[@julianshaw2000]

Best Angular tutor!!!

[@deborah_kurata]

Thank you for this as well! 😊

[@AmmarTheTrainer]

best explanation of signals so far... thank-you miss @Deborah Kurata for sharing with us..

[@deborah_kurata]

So glad it was helpful! Thanks for watching!

[@leonidesmuguercia4211]

The best explanations always come from you!!!!!

[@deborah_kurata]

Thank you so much! Great to hear it was useful!

[@yuriinadilnyi3029]

It's a clearest explanation of signals

[@deborah_kurata]

Thank you! 🙏

[@AntonioSantana-ll8il]

Terrific explanation!! thanks, i can't wait to see more content, Greetings from Colombia!

[@deborah_kurata]

Greetings! Thank you for the kind words!

[@irinadrozd1573]

Great video Deborah! Thank you

[@deborah_kurata]

Thanks! And thank you for watching!

[@demidovmaxim1008]

Thank you! This is the best video about signals I have found

[@deborah_kurata]

Thank you so much! 🙏

[@gboyegalawal8881]

The only video that really explains it well

[@deborah_kurata]

Thank you so much!

[@guilhermelacerda3908]

OMG, what an amazing class! Tks, it helped me a lot! ⭐⭐⭐⭐⭐

[@deborah_kurata]

So glad to hear that! Thank you!

[@raghavendra6978]

This was really a awesome way of teaching, thanks :)

[@deborah_kurata]

Glad it was helpful! Thank you! 😊

[@fahadgaliwango4502]

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 🎉

[@deborah_kurata]

Yep! But you'll probably still see Observables in services to handle http requests and other async operations.

[@deibymontoya9284]

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!

[@deborah_kurata]

Thank you so much! It's great to hear that the video was useful!

[@murilomelo6752]

Instant subscription! What a beautiful way to explain.

[@deborah_kurata]

😊 Great to hear! Thank you so much!

[@RomanWaves]

amazing explanation, thank you very much !

[@deborah_kurata]

Thank you! Signals are a "game changer" for Angular!

[@dreamvallyhasan4807]

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

[@kjbetz]

Great stuff, @Deborah! Thanks for the update!

[@deborah_kurata]

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?)

[@fmontes83]

Best Signals video ever! Thank you!

[@deborah_kurata]

Wow, thanks! Glad to hear it's useful!

[@mikopanjean8756]

Great Tutorial, that makes life simpler.

[@deborah_kurata]

So great to hear that. Thank you!

[@augustincalin]

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.

[@deborah_kurata]

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! 🙏

[@makacoder]

Signal is I think a borrowed idea from knockoutjs (it's called observable in knockoutjs). Computed is a knockoutjs feature as well

[@deborah_kurata]

It seems so. Have you see this? dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob

[@metric152]

This looks wonderful. Thanks for the clear well explained examples.

[@deborah_kurata]

Great to hear. Hope it is useful. Thanks!

[@message59]

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 😁

[@deborah_kurata]

Thank you so much! Glad it was helpful! 😊

[@ayoubelhayat9650]

Fantastic explanation 🙌🏻. Thanks a lot Deborah

[@deborah_kurata]

Thank you so much! Glad it was useful!

[@lingarajsureban9720]

as always very fantastic explanation on this topic... 👋👋

[@deborah_kurata]

That is kind of you to say. Thank you.

[@mohamedabdelrahuman]

Really you are very very great thank you are the best one i loved your organized way and simplicity really thanks my dear

[@deborah_kurata]

Thank you so much 😊

[@VladiGuitar87]

Hey. Thanks a lot four your work! You explain the topic very well!

[@deborah_kurata]

Hey! Thank you for the kind words! 😊

[@vd2828]

Awesome video. Thank you so much

[@deborah_kurata]

Great to hear! Thanks!

[@MohamedHassan-hk6dh]

thanks for your effort , i hope to see videos related to micro frontend in angular

[@deborah_kurata]

Thanks for watching! I'll add that to my list. Thanks!

[@CarlosRivadeneiraZ]

I'm feeling like I'm in plurlsight, thanks for share your knowledge Deborah

[@deborah_kurata]

Thank you for watching!

[@Tech_Publica]

You are always the best... I hope to see you making a new , complete and in depth , Angular course for Pluralsight soon!

[@deborah_kurata]

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. 😥)

[@sudhansusatyam5835]

You are the best tutor I found so far... But how? Give some tips

[@Sanjism-y9k]

Thanks ,for your nice videos !

[@deborah_kurata]

Thank you for watching!

[@bojanasamardzioska3040]

thanks a lot! great explanations!

[@deborah_kurata]

Glad it was useful! Thank you for watching!

[@rs4267]

Thanks i've understand the concept and see how much sigals can be usefull

[@deborah_kurata]

Glad it was helpful! Thanks for watching!

[@pedromoraes2129]

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.

[@deborah_kurata]

Yep. They are definitely nice features!

[@havefun5519]

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.

[@deborah_kurata]

Could you elaborate? I'm unclear on your question.

[@sylviesumer7680]

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.

[@deborah_kurata]

Nice! Hope you have as much fun with these new features as I have! All the best.

[@muhanad102]

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?

[@deborah_kurata]

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: kzbin.info/www/bejne/oZTdnJ9ofdOXgMk Does this help make the case for signals?

[@amerispunk]

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?

[@deborah_kurata]

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)

[@dixavier27]

AMAZING!

[@deborah_kurata]

Thanks! 😊

[@DannyAwad]

You have a new subscriber🎉

[@deborah_kurata]

Yay! Thank you! 😊

[@erfanfarhadi]

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?

[@deborah_kurata]

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.

[@erfanfarhadi]

@@deborah_kurata Thank you for your valuable response. The earth needs people like you☘️

[@diegoj_c6751]

I loved it!

[@deborah_kurata]

Excellent! Thanks!

[@im4555]

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!

[@deborah_kurata]

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?

[@winnemucca-sk5392]

Thank you for the course. I used to follow all of your courses on pluralsight. Is this channel your main source of content now?

[@deborah_kurata]

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.

[@sourishdutta9600]

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.

[@deborah_kurata]

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."

[@sourishdutta9600]

@@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

[@vaibhavchawla2439]

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 ?

[@deborah_kurata]

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?

[@vaibhavchawla2439]

@@deborah_kurata Thank you very much for the explanation. It is something new that I discovered. 😃😃

[@raj.blazers]

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?

[@deborah_kurata]

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?

[@andreasvasd8802]

Very interesting content! Waiting more to comee :)

[@deborah_kurata]

Great to hear! Thanks! 🙏

[@chuonchuon7386]

your videos are great. thank you. 😀

[@deborah_kurata]

Glad you like them! Thank you!

[@pavankumarrampathati7818]

Thank you very much for let us know🎉🎉🎉🎉🎉🎉

[@deborah_kurata]

Great! Hope it's useful for you!

[@tuntunpandit8367]

Please post more videos on angular. Thanks

[@deborah_kurata]

I'm hoping to, thanks!

[@musoverda]

Are there already any standards (generally accepted rules) for writing variable names for signals?

[@deborah_kurata]

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. :-)

[@timothyasigbey3304]

It looks more like mobx is there any possible use case to use signals with ngrx. Nice video by the way. Well explained.

[@deborah_kurata]

Check this out: dev.to/ngrx/announcing-ngrx-v16-integration-with-angular-signals-functional-effects-standalone-schematics-and-more-5gk6

[@timothyasigbey3304]

thank you@@deborah_kurata

[@pranambhat7964]

Big fan here!

[@deborah_kurata]

☺

[@bijoyalfred87]

I request you to kindly add videos about unit testing signals

[@deborah_kurata]

Great idea. I keep expecting to see more guidance on testing signals coming from the Angular team ... so I've been waiting for that.

[@mikaduchna1987]

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?

[@pronileston4869]

Love it

[@deborah_kurata]

Excellent!

[@MohamedHassan-hk6dh]

could you make a video about input signal with data from the server ? and thanks in advance

[@deborah_kurata]

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: kzbin.info/www/bejne/g4Lan2SZfK9osJI

[@NewdevHajjouji]

Thank you well explaind

[@deborah_kurata]

Thank you! 🙏🏼

[@mugatu2017]

thanks, what about the new life cycle hooks?

[@deborah_kurata]

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.

[@mugatu2017]

@@deborah_kurata thanks Debora!!

[@vidyas1545]

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?

[@deborah_kurata]

Yes ... eventually... that's one of the goals.

[@NishvanthD]

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 ?

[@deborah_kurata]

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?

[@NishvanthD]

@@deborah_kurata Thankyou Very much

[@MostafaMohamed-uw4lf]

you are so talented, awesome explaination, thanks so much. do you have courses for design pattern / algorithm / data structure?

[@deborah_kurata]

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?

[@MostafaMohamed-uw4lf]

i am not sure, but i believe it would be amazing 1. data structure and algorithm. 2.design pattern.

[@celikart]

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?

[@deborah_kurata]

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?

[@AnthonyDev]

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.

[@deborah_kurata]

Thank you! ☺ Have you seen this video: kzbin.info/www/bejne/a4Snamxrr7CpmM0 Does it answer your question?

[@AnthonyDev]

@@deborah_kurata I just watched it! Great explanation and the final code is clear and cleaner. Thanks.

[@MrKYT-gb8gs]

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?

[@deborah_kurata]

You shouldn't need extra code. Could you do a stackblitz to demo your scenario?

[@dozadetrezire7455]

In Angular 17, the mutate method doesnt work anymore. What's the alternative for it in Angular 17?

[@deborah_kurata]

Correct. Now you can use the update method instead. I have some examples here: kzbin.info/www/bejne/rZTRkGuLo751e9k

[@raj.blazers]

Is it advisable to update a signal within computed function or an effect?

[@deborah_kurata]

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.

[@raj.blazers]

@@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?

[@deborah_kurata]

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

[@wathanaphon1]

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,

[@deborah_kurata]

I have not used PrimeNG, so don't have the expertise to help you with that. Maybe try PrimeNG support or stackoverflow?

[@kudorgyozo]

what's the difference between update and set?

[@deborah_kurata]

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?

[@jitheshkramesh]

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.

[@deborah_kurata]

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.

[@jitheshkramesh]

@@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.

[@deborah_kurata]

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.

[@alexle7895]

Would Signals replace NgRx, or it is a completely different feature?

[@deborah_kurata]

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

[@SonNguyen-lw9nj]

Thanks so muck

[@deborah_kurata]

Thank you for watching!

[@sarathlalsaseendran]

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.

[@deborah_kurata]

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?

[@sarathlalsaseendran]

@@deborah_kurata That would be really useful. Thank you so much. 😍

[@danielchirinosr]

hi Deborah, how can I update a signal from another component?

[@deborah_kurata]

Move the signal to a service, inject the service, and then it can be updated from any component.

[@mohamadalhamid287]

Great lessons, it's hard to understanding signals form another soruce, for that I watch the topics form women👌

[@deborah_kurata]

Glad it was helpful!