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*

*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 YouTube 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).

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#bestpractices
#angulartutorial
#angularparentchild
#componentcommunicationinAngular
#angularcomponentcommunication
#angularsignalinputs
#signalinputsangular
#angular17.1signalinputs
#angularsignalinputrequired
#angularsignaltutorial
#angularinput
#angularinputtransformation

[mitch]

Wow, I feel like I found a gem in a cave full of YouTube tutorials. Clean explaining, in-depth and simple. Subscribed!

[GuillermoArellano]

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

[cristobalcanas]

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

[renrenklein_th]

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

[rahulxdd]

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

[raj.blazers]

Great tutorial and great explanation. Concepts nailed to the point. I started watching the other videos as well.

[richarddefortune]

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.

[juliojimenez]

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

[gabrielporto]

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

[kishoreandra]

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

[yojanmorales]

clear as water, I love these videos

[raj.blazers]

I hope Angular regains its popularity in 2024 so that I don't need to continuously update with the react ecosystem (which I don't like compared to angular)

[marcelovizcarra]

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

[praku]

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?

[rkrao]

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 .

[rishukumar]

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

[igorr]

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

[prasoon]

What is the difference between computed and effect ??

[skosner]

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?

[TheEuphoricism]

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