Free tools Windows power users keep installed
One-click scans. No signup required.
Angular component inputs let a parent pass values to a child component through template bindings. For new Angular projects, the recommended API is the signal-based input(); @Input remains supported for existing or decorator-style code. Use input.required() when a value must be supplied, and use model() when a child must also send changes back to its parent.
How Angular component inputs work
An input is a property that a component or directive exposes for a parent to bind. For example, a parent can pass a value with <custom-slider [value]="50" />. The binding name is the input’s public template name; the child reads the value through its declared input property.
As an Amazon Associate I earn from qualifying purchases.
Angular recognizes signal inputs when input() or input.required() initializes a component or directive class member. Input declarations are recorded statically at compile time, so 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.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsChoose the right input API
| Need | API | What it does |
|---|---|---|
| Declare a new input | input() |
Creates a read-only signal; call it to read the current value. |
| Require a value from every template consumer | input.required<T>() |
Creates a required input signal; Angular reports a missing binding at build time. |
| Keep or use decorator-based declarations | @Input() |
Remains fully supported and uses the same template binding syntax. |
| Normalize or convert a value supplied by the parent | Input transform |
Maps the bound value to the value the component reads. |
| Let the child update a value and notify the parent | model() |
Supports two-way binding and creates a matching change output; transforms are not supported. |
Angular recommends signal-based inputs for new projects, while the decorator API remains fully supported. These APIs describe different ways to declare inputs, not documented performance tiers. If maintaining code for a particular older Angular release, consult documentation for that version: for example, Angular v18 described signal inputs as developer preview, unlike the current guide’s recommendation.
#1 Best Overall
Declare and read signal inputs
Use input() in a class member initializer. It returns a read-only signal, so read its current value by calling it in the class or template:
import { Component, input } from '@angular/core';
@Component({
selector: 'custom-slider',
template: '<p>Value: {{ value() }}</p>',
})
export class CustomSlider {
value = input(0);
}A parent can provide a value using the same property binding syntax:
<custom-slider [value]="volume" />If an input has no initial value, its value can be undefined. Include a suitable initial value when that reflects the component’s behavior, or use a required input when omission is invalid.
Recommended Free Tools
Make an input required
Declare a required signal input with input.required<T>(). The resulting signal has type T, and Angular reports a build-time error if a template uses the component without supplying that input.
Rank #3
import { Component, input } from '@angular/core';
@Component({
selector: 'user-card',
template: '<h2>{{ name() }}</h2>',
})
export class UserCard {
name = input.required<string>();
}Its consumer must bind the required property, for example <user-card [name]="userName" />. A required declaration catches omissions in template usage; it does not mean the parent must provide a particular literal value.
Use `@Input` in decorator-based code
The decorator API is still supported and accepts the same kind of parent template binding. It is appropriate when working in an existing decorator-style component or when that style fits the codebase. The current Angular guide recommends input() for new projects.
import { Component, Input } from '@angular/core';
@Component({
selector: 'custom-slider',
template: '<p>Value: {{ value }}</p>',
})
export class CustomSlider {
@Input() value = 0;
}The parent still writes <custom-slider [value]="volume" />. Unlike a signal input, the decorator property is read as a property rather than called as a signal.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Change the public binding name with an alias
An alias gives an input a template-facing name that differs from its class property name. This lets the component keep a useful internal name while exposing the name its consumers bind. Signal input declarations support aliases, and the @Input API also documents an alias option. Angular’s component metadata inputs option can expose inherited properties and aliases as well.
Choose names carefully: Angular warns against input names that collide with DOM element properties, because a binding can become ambiguous between the component and the element. The guide also advises against adding selector-style prefixes to component inputs.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Convert incoming values with an input transform
An input transform maps the value supplied through a template binding to the value the component reads. It is useful when the public representation needs normalization or conversion, such as turning a string representation into a number. Both signal inputs and the documented @Input options support transforms.
Angular recommends input transforms over getters and setters when possible. Avoid complex or costly setters: they may be invoked multiple times. Model inputs are different; they do not support transforms.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Use `model()` for two-way binding
Choose a model input when the child needs to change a value and propagate that change to the parent. A model input creates a corresponding <name>Change output, enabling two-way binding with [(name)] syntax. Model inputs can be required or aliased, but do not support transforms.
import { Component, model } from '@angular/core';
@Component({
selector: 'custom-slider',
template: '<button (click)="value.set(value() + 1)">Increase</button>',
})
export class CustomSlider {
value = model(0);
}A parent can bind a variable in both directions with <custom-slider [(value)]="volume" />. Use a regular input when data only flows from parent to child; use a model input when the child must also propagate updates.
Quick Recap
Official Angular references
- Angular guide: Accepting data with input properties
- Angular API: input
- Angular API: Input
- Angular guide: Two-way binding
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.
