Angular's New Signal Inputs

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
KZbin 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 KZbin 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 KZbin content: / @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#bestpractices
#angulartutorial
#angularparentchild
#componentcommunicationinAngular
#angularcomponentcommunication
#angularsignalinputs
#signalinputsangular
#angular17.1signalinputs
#angularsignalinputrequired
#angularsignaltutorial
#angularinput
#angularinputtransformation

[@GuillermoArellano]

I am always learning something new from Deborah. Thank you!

[@deborah_kurata]

That's so nice of you to say. Thank you.

[@rahulxdd]

Great video to understand signal based inputs. Thank you for including the stackblitz.

[@deborah_kurata]

Glad it was helpful! 😊

[@cristobalcanas5189]

I love your content. Great video! Angular 17 is rocking

[@deborah_kurata]

Awesome, thank you! Angular is getting better and better!

[@caseyspaulding]

Thank you!

[@joeyvico]

Wonderful tutorial, as usual Deborah

[@deborah_kurata]

Thank you! 😊

[@AntonioSantana-ll8il]

Excellent video!!

[@deborah_kurata]

Thank you very much!

[@renrenklein_th]

Well I learned something new from this, great as always. Thanks ^_^

[@deborah_kurata]

Glad to hear it it was useful. Thank you! 😊

[@yojanmorales]

clear as water, I love these videos

[@deborah_kurata]

Thank you so much!

[@gabrielporto3936]

I'm new here and i was very very impressed with yours videos Deborah, thank you!

[@deborah_kurata]

Glad you like them! 😊

[@deepakkumarmohapatra4760]

just wow, thanks Deborah🤩

[@deborah_kurata]

Thank you!

[@ashishnayak2666]

Excellent. Clear explanation 👌 👏 👍

[@deborah_kurata]

Thank you 😊

[@Erril-1]

Amazing videos :)

[@deborah_kurata]

Thanks! 😀

[@patrickkabuga4945]

Great video, Thanks

[@deborah_kurata]

Thanks! Glad you liked it!

[@naspy971]

Very clear, thanks ma'am

[@deborah_kurata]

Most welcome 😊

[@kashifalikhan4420]

Very well explained

[@deborah_kurata]

Thank you! 😊

[@kishoreandra]

wow, great tutorial .. its so clear even for a beginner to Angular like me 💯

[@deborah_kurata]

Glad to hear that! Thank you! 😊

[@richarddefortune1329]

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.

[@deborah_kurata]

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?

[@richarddefortune1329]

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

[@juliojimenez450]

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! 😉👍

[@deborah_kurata]

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?

[@shrek1478]

thx

[@marcelovizcarra188]

Nice! It would be awesome if you can review the new output signal in another video as well 😊

[@deborah_kurata]

Coming soon! Thank you! 😊

[@praku78]

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?

[@deborah_kurata]

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.

[@praku78]

Thank you! :)

[@rishukumar7586]

is there is a way to check signal is defined or not in template ?

[@rkrao8582]

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 .

[@deborah_kurata]

Thank you! What you are doing *sounds* right, but I'd have to see some code to be sure. If you want to create a small, focused, StackBlitz example I'd be happy to take a look. YT doesn't allow links in replies, so send me the StackBlitz using only the project name ( ~/edit/***whatever is here). That should make it past the post validation.

[@igorr4682]

More and more Angular reminds me of React or VUE.js

[@deborah_kurata]

Is that a good thing?

[@sk8osner]

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?

[@deborah_kurata]

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

[@sk8osner]

@@deborah_kurata just changing the object reference, is there a way to make it like this in VueJS? are the reactive type variables

[@deborah_kurata]

@@sk8osner I don't know Vue, so don't know the answer to this question.

[@sk8osner]

@@deborah_kurata reactive listens to the changes of any nested property of an object, without having to change its reference, thanks for your response

[@TheEuphoricism]

doesnt all of this just feel like RXJS with handcuffs on?

[@deborah_kurata]

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

[@alexpanteli3651]

Bootstrap in 2024?

[@deborah_kurata]

Is there something else you would suggest? I didn't want to add the "heaviness" that is Material for a sample app.

[@alexpanteli3651]

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

[@deborah_kurata]

Thank you! I haven't used Tailwind. I definitely need to check out the CSS Grid.

[@FUNc4l4v3r4]

​@@deborah_kurata Tailwind is great for fast prototyping.