Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular components receive data through inputs declared on the component or directive and supplied by a parent template binding. For new projects, Angular recommends signal-based input(); the established @Input decorator remains fully supported. Use a one-way input when a child consumes a value, and a model input when it also needs to send edits back to its parent.
How Angular component inputs work
A component or directive declares the inputs it accepts. A parent then supplies a value by binding to the input name in its template:
// Child component
value = input(0);
// Parent template
<app-child [value]="50" />In this example, value is the child’s TypeScript property and the parent binds to it with [value]. Input declarations are recognized statically by Angular’s compiler; they cannot be added or removed at runtime. Input names are case-sensitive, and inputs are inherited when a component class extends another component class. See Angular’s guide to accepting data with input properties.
Choose the input API that fits the data flow
| API | Use it when | Behavior |
|---|---|---|
input() |
A child needs to receive and read a value. Angular recommends this API for new projects. | Exposes a read-only signal that the component reads by calling it. |
@Input |
You are using the decorator-based API in an existing codebase or prefer its property-based form. | Remains fully supported; supports aliases, required inputs, and transforms. |
model() |
A child edits a value and should propagate the update to its parent, as with a custom form control. | Supports two-way binding and creates a corresponding change output automatically. It does not support transforms. |
Angular’s documentation recommends signal-based input() for new projects, but this does not mean @Input is deprecated or no longer supported. For details, see the official input API and Input API.
#1 Best Overall
Make inputs optional or required
Use a default for an optional input
A default gives the child a value to use when the parent does not bind that input:
value = input(0);The input signal’s value is initially 0 unless the parent provides another value.
Allow an input to be undefined
When you declare an input without a default, its value may be undefined. For example, input<number>() has the type InputSignal<number | undefined>. Account for that possibility wherever the component reads the value.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Require a binding
Use input.required<number>() when the parent must supply a value:
Rank #3
itemId = input.required<number>();Angular reports a missing required binding during the build. This check concerns whether the input is bound; it is not runtime validation of the value’s contents. With the decorator API, use @Input({required: true}) for the equivalent requirement.
Read signal inputs in the child
A signal input is read by calling the property, such as this.value(). The receiving component can read the signal but cannot write to it. Its parent provides the value through the template binding and can update that value by changing what the binding supplies.
Transform values at the input boundary
An input transform runs when Angular sets an input. Its parameter type describes the values accepted from the template; the transform’s result is the type the component receives. For example, a transform can accept a number and expose a string with a px suffix.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Keep transforms pure and statically analyzable: avoid relying on mutable outside state. Angular provides booleanAttribute and numberAttribute for common coercion needs:
booleanAttributefollows HTML-like presence semantics and treats the literal string"false"as false.numberAttributeattempts to parse a number and returnsNaNif parsing fails.
For decorator inputs, transforms are also available through the @Input configuration. Angular advises using a transform instead of a getter or setter when possible; setters with costly or complex work are a poor fit because Angular may invoke them multiple times.
Use aliases only when the template name should differ
An alias changes the name used in a parent template without changing the child’s TypeScript property name. This can help when the public binding name should differ from the internal property name, but Angular generally advises against unnecessary aliases and prefixes. Avoid input names that collide with native DOM element properties.
Use model inputs when the child must send changes back
A regular input carries a value into a component. If the component edits that value and needs to notify its parent, use a model input instead. A model input creates a change output whose name is the model input name followed by Change. Calling set() or update() on the model emits that change, enabling two-way binding. Model inputs can be required or aliased, but they do not support transforms.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Keep or use decorator-based inputs in existing code
The @Input decorator remains a supported option. It can decorate a property or a getter/setter pair, and its configuration supports aliases and transforms. Inputs may also be listed in component metadata, which can be useful for exposing inherited properties. For a new declaration that should be required, use @Input({required: true}).
Quick Recap
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.
