That transform option is crazy. You can map data with a reusable transformation function on a per-component basis that updates automatically whenever new data comes in, directly in the input signal. Insane.
I love the new transform option too, it replaces the need for getters and setters and certain uses of ngOnChanges, very nice. It's also available for the regular @Input decorator. 👍
Great video and explanations! What if a signal comes from a service to a grand parent component then is passed to a parent and then to a child? Do input signals work with the nested trees of components and preserve their reactivity on every level?
Thank you 😊 If the signal is passed around through components via a service, all consumers of the signal will be notified of new values. Check out the video on Signal-based data services here on the channel. 👍
i like the direction angular is taking with these signals, new template syntax etc. the only problem in quick adoption of newer angular versions is sketchy update cycle of packages my projects depend on.
There is no two-way binding with signals, you need to invoke the signal with () as a function to get a value, and you need to call set or update on it to modify the value.
We didn't cover micro-frontends so far on the channel, that is something that I could look into. I think with Angular, it would be a matter of giving each frontend a separate build, and they could share a common shared module.
@@AngularUniversity The challenge we are facing right now is when there are multiple team working on different github repository and we need to have communication between those unrelated components after deployed on server.
I really enjoy your content! So clear, and also just a bit more indepth so I don't get stuck on building the first real feature for myself. If you like this content: this expert also has a great site where you can get a subscription on all his content for a moderate fee, and a course on Udemy, which is packed with info and updated to the latest versions; this Udemy course is almost for free. Lots of thank you from the Netherlands 🙏
Effect is not just meant for logging, that is just an example of a typical side-effect. You can use effects for any typical side effect, liek writing to local storage, writing to the database in the background, writing to a cookie, logging, etc. If you want to calculate derived data, use the computed API instead. 👍
Hi, what about performance since signals are functions and in the template it’s being binding a function to get signal value and since in Angular it’s better to avoid function binding to not have performance issues?
It's not a problem at all. When full signal-based reactivity is available, and everything is plugged into change detection, it will be faster this way.😁
Mmm however I created a small project with a standalone component and with change detection onpush and in the template I put in binding a signal in a paragraph and a button that at the click increments a counter in a very normal variable that has nothing to do with the signals (I only did it to be able to trigger the click event) and then I debugged the signals.mjs file of angular/core precisely in the getter function contained in the createSignal function and my fear was confirmed because despite having an onpush component, the getter function of the signal is called clicking on the button that does not update anything , so they did not really solve the problem of the functions in binding.
@@francescoguagnano1212 Mostly signals are not yet plugged in with change detection. they are not plugged into normal change detection, and with OnPush they are only integrated in very particular scenarios. Signals right now provide a nice alternative to Rjxs for writing reactive shared data services, but the change detection benefits are not here right now; Signals are a work in progress. 👍
It means that when a value changes, only the components using that value will re-render. With input signals, you could theoretically write an entire Angular application with Zone.js disabled, and you'll never have to learn about change detection strategies.
My biggest problem with this is that i can't be initializing all my objects for the inputs every time. But if i don't, then angular will make the signal , and then i have to have a gazillion checks that the value of the signal is not undefined before i do something, otherwise typescript always complains. Is there a workaround or better way of doing this?
@@AngularUniversity even if i give it an explicit type e.g. user = input.required() angular initializes this with 'User | undefined'. I guess the input.required is a better solution. But if I misunderstood your solution please let me know bcs I'd like to get around this
You mean if you log on the constructor? It would only do that once, it wouldn't call again console.log. The effect is needed for the logging statement to be called again with each new value of the input, as a side effect.
Yes there is a convergence, and with the upcoming functional authoring format that seems to be in the works it will be even more so. RxJs will become optional and outside the main learning path. Angular is really taking off. 🚀😊
To learn in detail Angular Signals, check out the Angular Core Deep Dive Course - angular-university.io/course/angular-course👍
I totally recommend Angular University. Very good quality of learning material! Both the blog and the video courses.
Thank you, it's awesome to hear that 😊 Please enjoy the courses 👍
I've been following you since I started programming in 2019.
Thank you Vasco.
You're welcome, I'm happy to hear that 😊 I'll keep the videos coming 😉
Since now you will be my main resource of angular news! :)
Thank you, stay tuned for more coverage of the Angular ecoystem 😊
Excellent content, Greetings from COLOMBIA!!
Thank you, please enjoy the videos. 🙂
I have been with angular since angular2 was in alpha. Can’t state enough how awesome signals is. Thank u Angular team! Great video.
Yes the same for me, it's an awesome framework😊
Thanks for sharing Vasco ! Always good Angular content !
My pleasure Alain, thanks for watching and please enjoy the new content. 👍😊
Great content as always!
Thank you. 😊
Thanks professor 🫡
Any time 😊
greate vedio as usual
Thank you, it's awesome to hear that. 😊 Please enjoy the channel. 👍
That transform option is crazy. You can map data with a reusable transformation function on a per-component basis that updates automatically whenever new data comes in, directly in the input signal. Insane.
I love the new transform option too, it replaces the need for getters and setters and certain uses of ngOnChanges, very nice. It's also available for the regular @Input decorator. 👍
Just don't abuse it
Thank you very much! Very well presented :-)
You're very welcome! 😊
Signal inputs are soooo cool
I love them too, makes the whole signal approach much more appealing. Looking forward to application wide reactivity. 😉
I think I have a problem when I use input.required, in my unit tests
in my console it shows error code NG0950
weird, this could be an issue, remember this is still in RC0
This is way easy now, I always hated doing Geters and Seters,
I like it too, it's way better this way 🙂. For getters and setters, there are now input transforms that replace most of the use cases.
NgOnChanges even worse, hate that sh.. signals are soooooo nice
Great video and explanations! What if a signal comes from a service to a grand parent component then is passed to a parent and then to a child? Do input signals work with the nested trees of components and preserve their reactivity on every level?
Thank you 😊 If the signal is passed around through components via a service, all consumers of the signal will be notified of new values. Check out the video on Signal-based data services here on the channel. 👍
Great video ❤
Thank you!! 😊
i like the direction angular is taking with these signals, new template syntax etc. the only problem in quick adoption of newer angular versions is sketchy update cycle of packages my projects depend on.
The Angular CLI makes is super easy to upgrade between versions, and you have this website to help also with upgrade notes - update.angular.io 👍
Hi, how to use features like changes.value.firstChange or changes.value.previousValue in the new effect function?
Signals only emit the last value. I think for that specific use case you could use the RxJs interoperability. 👍
is there any word whether it will be experimental or production?
I didn't see it mentioned anywhere yet. I think they will put in developer preview first, as they usually do.👍
Yeah, my guess is it'll be marked as experimental in 17.1, and made stable in 18.0
Can you do two-way binding with input signals?
There is no two-way binding with signals, you need to invoke the signal with () as a function to get a value, and you need to call set or update on it to modify the value.
Have we covered course on micro-frontend using angular? I am asked to work on it in my organization.
We didn't cover micro-frontends so far on the channel, that is something that I could look into. I think with Angular, it would be a matter of giving each frontend a separate build, and they could share a common shared module.
@@AngularUniversity The challenge we are facing right now is when there are multiple team working on different github repository and we need to have communication between those unrelated components after deployed on server.
I really enjoy your content! So clear, and also just a bit more indepth so I don't get stuck on building the first real feature for myself.
If you like this content: this expert also has a great site where you can get a subscription on all his content for a moderate fee, and a course on Udemy, which is packed with info and updated to the latest versions; this Udemy course is almost for free. Lots of thank you from the Netherlands 🙏
Thank you Michel, please enjoy the channel and the courses. 😊
effect isn't just to log things and not indicated to use to code inside it?
Effect is not just meant for logging, that is just an example of a typical side-effect. You can use effects for any typical side effect, liek writing to local storage, writing to the database in the background, writing to a cookie, logging, etc. If you want to calculate derived data, use the computed API instead. 👍
Hi, what about performance since signals are functions and in the template it’s being binding a function to get signal value and since in Angular it’s better to avoid function binding to not have performance issues?
It's not a problem at all. When full signal-based reactivity is available, and everything is plugged into change detection, it will be faster this way.😁
Mmm however I created a small project with a standalone component and with change detection onpush and in the template I put in binding a signal in a paragraph and a button that at the click increments a counter in a very normal variable that has nothing to do with the signals (I only did it to be able to trigger the click event) and then I debugged the signals.mjs file of angular/core precisely in the getter function contained in the createSignal function and my fear was confirmed because despite having an onpush component, the getter function of the signal is called clicking on the button that does not update anything , so they did not really solve the problem of the functions in binding.
@@francescoguagnano1212 Mostly signals are not yet plugged in with change detection. they are not plugged into normal change detection, and with OnPush they are only integrated in very particular scenarios. Signals right now provide a nice alternative to Rjxs for writing reactive shared data services, but the change detection benefits are not here right now; Signals are a work in progress. 👍
What are the advantages of signal based inputs?
These are reactive inputs, the main advantage is that it makes it super simple to implement your components in reactive style using signals.
It means that when a value changes, only the components using that value will re-render. With input signals, you could theoretically write an entire Angular application with Zone.js disabled, and you'll never have to learn about change detection strategies.
My biggest problem with this is that i can't be initializing all my objects for the inputs every time. But if i don't, then angular will make the signal , and then i have to have a gazillion checks that the value of the signal is not undefined before i do something, otherwise typescript always complains. Is there a workaround or better way of doing this?
You can use input.required instead, and make the field mandatory. You can also give the signal an explict type, to avoid the | undefined.
@@AngularUniversity even if i give it an explicit type e.g. user = input.required() angular initializes this with 'User | undefined'. I guess the input.required is a better solution. But if I misunderstood your solution please let me know bcs I'd like to get around this
would input signal display the value on the console without effect block? Like, just put console.log(${this.value()}) ?
You mean if you log on the constructor? It would only do that once, it wouldn't call again console.log. The effect is needed for the logging statement to be called again with each new value of the input, as a side effect.
Yes, Signals are not streams like RxJs Observables so you need to plug into effect or computed callback.
Also it pretty much looks like Angular is leaning towards React and Vue's concepts of reactivity. So similiar and easy to use compared to RxJS.
Yes there is a convergence, and with the upcoming functional authoring format that seems to be in the works it will be even more so. RxJs will become optional and outside the main learning path. Angular is really taking off. 🚀😊
React doesn't use Signals afair. React also does not have local detection (sections of a component); which Angular will have very soon
@@LarsRyeJeppesen that's true - no signals in React, but they have useState hook that operates like signals.
i hope webstorm consider this update from now, not like 17 update
Me too, with a bit of luck they are on top of it. I like Webstorm a lot.