Exploring reactive data binding with Signals

Angular’s data binding capabilities have been steadily improving to support reactivity. Starting from version 17.1, Angular introduced some powerful features to leverage reactivity using Signals in component interaction and data binding, such as input Signals, model inputs (starting from 17.2), and support for content and view queries. To align with input Signals, version 17.3 provides a new output API.

We will explore these new features in this section.

Signal inputs

The Angular @Input decorator is used to define an input property in a component, allowing data to be passed into the component from its parent component or template. It essentially creates a one-way data flow from the parent to the child component.

Angular 17.1 introduces Signal inputs that allow input data to be passed as Signals. This adds a powerful twist to data binding between parent and child components in Angular, transforming traditional Angular inputs...