From the course: Reactivity and Signals in Angular
Unlock this course with a free trial
Join today to access over 24,900 courses taught by industry experts.
Passing data as a signal to child components - Angular Tutorial
From the course: Reactivity and Signals in Angular
Passing data as a signal to child components
- [Instructor] Most JavaScript frameworks have some mechanism to pass props down the component tree. Angular uses component inputs to pass data from parent to child components. Before angular signals, we use the input decorator to annotate a class property as data that is passed into the component by its parent. Inputs declared this way are not reactive. To react to changing values, we can use the on change lifecycle hook, but onChanges executes anytime any of the component inputs change. It requires a lot of boilerplate to handle filtering the incoming changes to only react to specific properties. We can also use a setter on the input to intercept incoming values and set them to a reactive property. This pattern reduces the amount of boilerplate we have to write because the setter runs only when the input property changes. This is as close as we could get to a reactive input property by using a decorator-based input. Signal-based inputs are created using the input function. They…