🔤 Deep Dive: Using Signals as Inputs in Angular

Signals aren’t just for internal state—they can be passed as inputs to child components, enabling real-time, reactive data flow across your UI. This example demonstrates how to use a signal as an input and update it live as the user types.

Passing signals as inputs lets you build components that are always in sync with their parent’s state, with no manual subscriptions or change detection headaches.

How This Example Works

• Signal Declaration: The parent component declares a signal: searchInput = signal('').
• Live Updates: As the user types in the input field, the searchProduct method updates the signal in real time: this.searchInput.set(searchText).
• Passing as Input: The signal is passed directly to the child component: <input-signal-title [title]=\"searchInput\" />.
• Child Component: The child receives the signal as an @Input() and uses it reactively in its template: title().
• Reactive UI: Any change in the parent’s signal is instantly reflected in the child, with no extra wiring.

Why Use Signals as Inputs?

• Seamless Reactivity: Child components always display the latest state, automatically.
• Cleaner APIs: No need for EventEmitter or manual subscriptions—just pass the signal.
• Performance: Signals update only the parts of the UI that use them, making your app fast and efficient.
• Composable Components: You can build reusable, reactive components that work with any signal input.
• Real-World Use: This pattern is perfect for forms, search bars, filters, and any scenario where state needs to flow between components.