To pass data from a parent to an Angular component, declare an input on the child and bind to it in the parent template. Angular recommends the signal-based input() API for new projects; the decorator-based @Input API remains fully supported. Use a model input instead when the child must update the value and send that change back to its parent.
How parent-to-child input binding works
A component or directive declares the values it accepts. Its parent supplies them through template bindings, and Angular connects each binding to the matching input name. Input names are case-sensitive. Angular discovers input declarations at compile time, so you cannot add or remove inputs dynamically at runtime. Inputs are inherited when a component extends another component class.
As an Amazon Associate I earn from qualifying purchases.
For example, a child component can declare a signal input named value, and its parent can bind to it like this:
// Child component
value = input(0);
// Parent template
<app-child [value]="50" />The default value is used when the parent does not provide a binding. When the parent does bind the input, Angular supplies the bound value and updates it as the binding changes.
#1 Best Overall
Choose the input API that matches the data flow
| API | Use it when | What the child receives |
|---|---|---|
input() |
You want the recommended API for a new project and the child reads a parent-provided value. | A read-only signal, read by calling it. |
@Input |
You are working in an existing decorator-based codebase or need its property-based API. | A property, optionally configured with an alias, required status, or transform. |
model() |
The child edits a value and should propagate the change to the parent through two-way binding. | A writable model input with a corresponding change output. |
Angular recommends signal-based inputs for new projects, but the documentation says the original @Input API remains fully supported. There is no need to replace working decorator inputs solely because the signal API is available.
Declare optional and required inputs
Optional input with a default
Give an input a default when the component has a sensible fallback. In value = input(0), the child sees 0 if the parent omits the binding. The parent can still supply another value.
Optional input without a default
If there is no default, declare the type and account for the missing value:
value = input<number>();The resulting type is InputSignal<number | undefined>, because the parent may not provide a value.
Required input
Use input.required<number>() when a value must be bound. Angular treats the signal as non-undefined and reports a missing required binding during the build. This check ensures the template supplies the input; it does not validate arbitrary values at runtime.
The decorator equivalent is @Input({required: true}).
Rank #3
Read signal inputs in the child
A signal input is read by calling it, for example this.value(). It is read-only from the receiving component: the parent controls its value through the binding. If the child needs to send edits back rather than merely display or use a supplied value, use a model input instead.
Transform values when the template and component need different types
An input transform runs when Angular sets the input. Its parameter type describes values accepted from the template; the transform’s return type is the value exposed by the component property. For example, a transform can accept a number and produce a string with a px suffix.
Keep transforms pure and statically analyzable. They should convert the incoming value, not depend on mutable external state or perform side effects. Angular provides booleanAttribute and numberAttribute for common coercion:
booleanAttributeuses HTML-like attribute-presence semantics, while treating the literal string"false"as false.numberAttributeattempts numeric parsing and returnsNaNwhen parsing fails.
Transforms are supported for both signal and decorator inputs, but not for model inputs.
Use aliases only when the template name should differ
An alias changes the name the parent uses in its template without changing the TypeScript property name in the child. Aliases can be useful when a public binding name needs to differ, but Angular advises avoiding unnecessary aliases and prefixes. Avoid names that collide with native DOM element properties.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsUse model inputs for values the child edits
A normal input carries a value into the child. A model input is for a component that can change the bound value and should propagate the update to its parent, such as a custom form control. A model input automatically creates a change output whose name is the input name followed by Change. Calling set() or update() on the model emits that change. Model inputs can be required or aliased, but they do not support transforms.
Keep using decorator inputs where they fit
The @Input decorator remains supported. It can annotate a property or a getter/setter pair, and its configuration can specify aliases, required inputs, and transforms. Inputs can also be declared in component metadata, which can help expose inherited properties.
When possible, prefer a transform over a getter/setter for input conversion. Angular cautions against expensive or complex setters because it may invoke them multiple times.
Quick Recap
Official Angular references
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
