Angular Signal Inputs in 20 Minutes

Angular Signal Inputs are a mechanism to pass data between components using Signals. Inputs based on Signals offer a powerful, more reactive, and efficient way to manage data flow between Angular components. In this video, I explain in detail and with clarity, using excellent visuals and a simple example, how the new approach works.

This new feature provides a reactive alternative to the traditional decorator-based @Input(). Key benefits include reactivity, enhanced performance, efficiency, declarativity, and simplified data flow.

If you're unfamiliar with Angular Signals, almost everything in this video will still make sense without prior knowledge. However, I also have a great tutorial on my channel that covers the basics: https://youtu.be/0jdyzCHzPxo

Timestamps
00:00 What is Signal Inputs?
00:31 Default Value
01:09 Child Component in Parent's Template
01:36 Child Component's HTML element
01:47 Target and Source Properties
02:30 How to Display Input Property?
02:49 Wrapper Object
03:55 Binding Expression
05:26 Default and Undefined Values
05:46 Required Inputs
06:39 Type Requirement for Signal Input
07:38 How Required Types work with a Default Value?
08:39 Input Alias (first option)
09:31 Value Transforms (second option)
13:02 Page Example with Two Components
13:17 How to pass data directly from a parent template?
13:36 Strings vs Expressions
14:26 New Properties
15:01 Objects and Component
16:55 Computed Signals with Inputs
18:26 Effects with Inputs

Source code of tutorial examples (GitHub repository): https://github.com/IgorSedov/angular-tutorials/tree/main/angular-signal-inputs

☕️ Donation: https://www.patreon.com/igorsedov

Thanks to the @Angular Team for the new feature.

ℹ️ Source: https://angular.dev/guide/signals/inputs

Follow me on:
▪️Twitter: https://twitter.com/TheIgorSedov
▪️LinkedIn: https://www.linkedin.com/in/igorsedov/
▪️Instagram: https://www.instagram.com/theigorsedov/

Website: https://igorsedov.com
Email: me@igorsedov.com

#angular #angularsignals #angulartutorial #angularforbeginners

Видео Angular Signal Inputs in 20 Minutes канала Igor Sedov