Signal-Based Inputs and the Output Function

In newer versions of Angular, a pretty significant change is coming with Signals. If you work with Angular and haven’t heard about them yet, you’re in the right place. In this video you’ll learn what they are, at a high level, and you’ll learn how to use the new signal-based inputs along with the new output function in components. We’re going to take a look at an example using the existing @Input and @Output decorators and we’ll convert it over to signals and the output function. I’ve been using signals a lot lately and I can assure you, It’s a change. Definitely a different way of thinking. Alright, let’s get to it!
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Links:
- Before (stackblitz.com/edit/ttnwwm-ny...)
- After (stackblitz.com/edit/ttnwwm-pc...)
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
1:01 - What exactly are signals?
2:11 - Replacing the old @Input decorator with the new signal-based input
4:14 - Adding required signal-based inputs
5:14 - Using computed signals to remove the need to handle change detection
7:22 - Accessing signal values in the template
8:19 - Replacing the old @Output decorator and EventEmitter with the new output function
10:06 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #signals #signal #signal_input #angular_components

[@joecok]

Explanatiin is so simple and great

[@felipefreitas1498]

Thank you my friend. Great video!

[@aram5642]

Looking forward to the children query examples from you :)

[@briantreese]

Are you looking for examples of the Query function for animations? If so, I do have a video on it here: ua-cam.com/video/zk5MxzExl4o/v-deo.html

[@adrian333dev]

Awesome! Keep up sir 🎉

[@informer9261]

Sir please mak an video of cross component data sharing at different routes

[@LeonWaidyarathna]

When i try to import the output it gives @angular/core"' has no exported member named 'output'. Did you mean 'Output'?.
i m using "@angular/core": "^17.1.0",
i tried the with deleting node modules and re-install that's also not working. Any clue ?

[@briantreese]

It's a new feature, you'll need to be on version 17.3.0 or greater.

[@LeonWaidyarathna]

Thanks @@briantreese it's working now