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.
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.
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.
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.
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 🎉
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?
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 RU-vid video that you have uploaded, as long as you are signed in to your RU-vid account. Here are the steps to edit your video: Sign in to your RU-vid 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 RU-vid. 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!
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'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)
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?
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.
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.
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?
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. :-)
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!
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
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.)
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MQwn1cGJ5z0.html
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! 🙏
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?
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?
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 for the video! If we have sequentially this.quantity.set(5) and this.quantity(42) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oqYQG7QMdzw.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.
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.
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.
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?
Hi Debora, hope you are fine. Thanks for being so respectful with so well spoke and pronounced English. Most popular RU-vidrs 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!
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 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?
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.
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.
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?
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
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.
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?
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?)
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
