Angular's New Signal Inputs
Вставка
- Опубліковано 27 лип 2024
- In Angular, we often need our parent components to communicate with their child components. And we've used @Input properties for that communication. Starting in Angular version 17.1, we now have signal-based inputs as an alternative to @Input properties. That makes it easier to react to changes to those inputs.
In this video, we examine the new signal inputs feature and outline its benefits.
Links
UA-cam video "Angular's New Template Syntax: Control Flow": • Angular's New Template...
Code: stackblitz.com/edit/signal-in...
Content
00:00 Signal inputs in Angular
00:30 Sample application
01:40 @Input property
03:00 Computed signals
04:43 Passing data to a child component
06:19 Using a signal input
07:14 Transforming a signal input
08:22 Aliasing a signal input
08:55 Required signal input
09:54 Benefits of signal inputs
10:32 Wrap up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and UA-cam content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
Contact me on Twitter: / deborahkurata
Find my Pluralsight courses: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
View my UA-cam content: / @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#bestpractices
#angulartutorial
#angularparentchild
#componentcommunicationinAngular
#angularcomponentcommunication
#angularsignalinputs
#signalinputsangular
#angular17.1signalinputs
#angularsignalinputrequired
#angularsignaltutorial
#angularinput
#angularinputtransformation - Наука та технологія
I am always learning something new from Deborah. Thank you!
That's so nice of you to say. Thank you.
just wow, thanks Deborah🤩
Thank you!
Well I learned something new from this, great as always. Thanks ^_^
Glad to hear it it was useful. Thank you! 😊
I love your content. Great video! Angular 17 is rocking
Awesome, thank you! Angular is getting better and better!
Great video to understand signal based inputs. Thank you for including the stackblitz.
Glad it was helpful! 😊
Wonderful tutorial, as usual Deborah
Thank you! 😊
clear as water, I love these videos
Thank you so much!
I'm new here and i was very very impressed with yours videos Deborah, thank you!
Glad you like them! 😊
Very well explained
Thank you! 😊
Excellent. Clear explanation 👌 👏 👍
Thank you 😊
Very clear, thanks ma'am
Most welcome 😊
Great video, Thanks
Thanks! Glad you liked it!
Thank you!
wow, great tutorial .. its so clear even for a beginner to Angular like me 💯
Glad to hear that! Thank you! 😊
Excellent video!!
Thank you very much!
Brilliant! I love the "transform" part. @Input() could be use with a setter. With input signal, I was wondering whether to use a computed variable just to process the incoming data.
Thanks as usually.
Thank you! Yes, the transform is amazingly powerful.
Regarding using a computed signal, that depends on what you are doing with that incoming data. In my example, using a computed made filtering the list easy and reactive. Any time you need to react to a change in that incoming variable, computed is very helpful.
What are you doing with the incoming data? Does it need to react to changes?
@@deborah_kurata My case was similar to what you did in video. The value being sent is an enum. Once user select a different value, some formControls will be displayed/hidden and the formGroup updated. The @Input() setter will check the incoming will call the method that contains the logic.
Since there's nothing like that in input signal, that's why I was thinking about using a computed value just to react to the input signal 😇. I'm glad we've the transform method.
Amazing videos :)
Thanks! 😀
Another great video Deborah!
I am currently working on a component that contains a ‘signal input’ and from that signal I need to do a ‘Fetching Data as Side Effect’.
I have only been able to achieve this by incorporating the option ‘allowSignalWrites: true’ in the effect that makes the API call, which is not recommended by angular members: ‘Using effects to synchronize data by writing to signals can lead to confusing and potentially incorrect behavior, and should be enabled only when necessary’.
Some information about that would be awesome in one of your future videos!
Thank you very much and keep up the good work with the channel! 😉👍
Thank you!
As shown in this video, you can expand the binding from two-way to the long form: property binding and event binding. Then you can fetch the data within the method bound to the event. That way you don't need to use an effect.
Does that seem like it would work for you?
I have been going through your signal Videos they are really great.
I have a question here so I am using Angular 18 and I have my parent component declared with every property as signal and passing one of the signal to child component as input. So in this case it should be fine right? Right now I am not seeing any errors but all the videos that I saw on signal inputs using a general value being passed from parent to child then in child using signal inputs .
Nice! It would be awesome if you can review the new output signal in another video as well 😊
Coming soon! Thank you! 😊
thx
Thanks for the excellent Video, it helps to learn easily. I have a question as we started using this new signal concept, how different its from Reactive forms, can we use along with reactive forms? or should not use it?
Thank you for the kind words.
Signal inputs are for communication between a parent component and it's child component. They aren't useful for forms.
The Angular team is working on adding signals to their forms approach, but it's not available yet.
Thank you! :)
is there is a way to check signal is defined or not in template ?
More and more Angular reminds me of React or VUE.js
Is that a good thing?
I have a question, how can the computed property be used with an input that an object receives, is it necessary to change the object reference?
Yes. Something like this: this.selectedVehicle.update(v => ({...v, price: v.price + (v.price * 0.2)}))
I have a Stackblitz here: stackblitz.com/edit/angular-signals-v17-deborahk
@@deborah_kurata just changing the object reference, is there a way to make it like this in VueJS? are the reactive type variables
@@sk8osner I don't know Vue, so don't know the answer to this question.
@@deborah_kurata reactive listens to the changes of any nested property of an object, without having to change its reference, thanks for your response
doesnt all of this just feel like RXJS with handcuffs on?
In what respect?
signals are synchronous and focused on simplifying the template's change detection.
RxJS can be synchronous or async (but most often used for async) and is focused on event-based notifications.
Ben Lesh (the lead developer of RxJS) covered this well in a set of posts here: x.com/BenLesh/status/1775207971410039230
Bootstrap in 2024?
Is there something else you would suggest? I didn't want to add the "heaviness" that is Material for a sample app.
@@deborah_kurataModern CSS comes equipped with built-in grid functionality, eliminating the necessity for additional Bootstrap classes or Tailwind as an alternative for quick prototyping. I am a huge fan of your Angular tutorials by the way.
Thank you! I haven't used Tailwind. I definitely need to check out the CSS Grid.
@@deborah_kurata Tailwind is great for fast prototyping.