💥 Angular Signal Inputs (COMING SOON in Angular 17.1)
Вставка
- Опубліковано 26 лип 2024
- In this video we are going to cover a new feature in the upcoming Angular 17.1 release: Angular Signal Inputs.
We will see how signal inputs are an alternative to the traditional @Input decorator, and we will demo how they provide an alternative to the OnChanges lifecycle hook.
Related short form videos:
Angular Signal Inputs In 60 seconds - • 💥 Angular Signal Input...
Related articles on the Angular University blog:
Angular Signals: Complete Guide -blog.angular-university.io/an...
Timestamps:
0:00 Intro
0:40 Coverting @Input to Signal Inputs
5:23 replacing OnChanges with effect()
08:00 required, alias and transform options
Free content at the Angular University:
- 20% of our lessons are free, you don't have to login to watch the lessons. The free lessons are the ones with the P (Pro) - angular-university.io
- Watch the free Angular For Beginners Course - angular-university.io/course/...
Follow me:
Twitter - / angularuniv
Facebook - / angular.university
UA-cam - / @angularuniversity
Instagram - / angular.university
LinkedIn - / angular-university
TikTok - / angularuniversity
Threads - www.threads.net/@angular.univ...
![Lp. Последняя Реальность #107 РОДНОЙ ДОМ [Финал] • Майнкрафт](http://i.ytimg.com/vi/IK3QKzKUlHM/mqdefault.jpg)
To learn in detail Angular Signals, check out the Angular Core Deep Dive Course - angular-university.io/course/angular-course👍
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 😉
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 👍
Excellent content, Greetings from COLOMBIA!!
Thank you, please enjoy the videos. 🙂
Thanks for sharing Vasco ! Always good Angular content !
My pleasure Alain, thanks for watching and please enjoy the new content. 👍😊
Since now you will be my main resource of angular news! :)
Thank you, stay tuned for more coverage of the Angular ecoystem 😊
Great content as always!
Thank you. 😊
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😊
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
Signal inputs are soooo cool
I love them too, makes the whole signal approach much more appealing. Looking forward to application wide reactivity. 😉
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. 😊
Thank you very much! Very well presented :-)
You're very welcome! 😊
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
Thanks professor 🫡
Any time 😊
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 👍
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. 👍
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.
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.
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
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. 👍
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.
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.
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.
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
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. 👍
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.
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. 👍
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