Angular's New Signal Inputs

[@sumitsahu2338]

I have subscribed this channel the moment I watched first video of signal and then I suggested this channel to my friends as well. Thanks for such an amazing content.

[@deborah_kurata]

Thank you for your support, and for spreading the word!😊

[@mitch1668]

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

[@deborah_kurata]

Awesome, thank you! 😊

[@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!

[@deepakkumarmohapatra4760]

just wow, thanks Deborah🤩

[@deborah_kurata]

Thank you!

[@renrenklein_th]

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

[@deborah_kurata]

Glad to hear it it was useful. 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?

[@raj.blazers]

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

[@deborah_kurata]

Thank you so much!

[@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! 😊

[@kishoreandra]

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

[@deborah_kurata]

Glad to hear that! Thank you! 😊

[@joeyvico]

Wonderful tutorial, as usual Deborah

[@deborah_kurata]

Thank you! 😊

[@ashishnayak2666]

Excellent. Clear explanation 👌 👏 👍

[@deborah_kurata]

Thank you 😊

[@Erril_Ferndal]

Amazing videos :)

[@deborah_kurata]

Thanks! 😀

[@kashifalikhan4420]

Very well explained

[@deborah_kurata]

Thank you! 😊

[@AntonioSantana-ll8il]

Excellent video!!

[@deborah_kurata]

Thank you very much!

[@naspy971]

Very clear, thanks ma'am

[@deborah_kurata]

Most welcome 😊

[@patrickkabuga4945]

Great video, Thanks

[@deborah_kurata]

Thanks! Glad you liked it!

[@caseyspaulding]

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! :)

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

[@rishukumar7586]

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

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

[@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! 😊

[@shrek1478]

thx

[@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)

[@deborah_kurata]

From where I'm sitting, Angular is pretty popular. 😊

[@prasoon2510]

What is the difference between computed and effect ??

[@deborah_kurata]

Computed creates a signal from one or more other signals. Like calculating a total price signal based on the quantity signal and price signal. An effect executes code when one of it's referenced signals change. It doesn't create a signal. For example, every time the user updates their display name (stored in a signal) an effect automatically saves that name to local storage. Did that help?

[@prasoon2510]

@@deborah_kurata Yes got it, thanks.. 😊

[@prasoon2510]

How to handle API calls using signals? It’s mandatory to use effect in component to get the response? Can you create a video? From component.ts to store to http service call

[@deborah_kurata]

Have you seen this video? kzbin.info/www/bejne/qHm0kmeJpcqel6M

[@prasoon2510]

@@deborah_kurata I will check it and will let you know..

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

[@igorr4682]

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

[@deborah_kurata]

Is that a good thing?

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