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 parent-provided data through input properties. For new projects, Angular recommends signal-based input(); @Input remains supported. Use input.required() when a template must supply a value, and use model() when a child component needs to send changes back to its parent.
How to pass data to an Angular component
Bind a parent value to an input in the child component’s template. For example, a parent can pass a number to a child with <custom-slider [value]="50" />. The binding name must match the input’s template-facing name.
With signal inputs, declare the input as a class member using input(), then call the resulting signal to read its current value:
import { Component, input } from '@angular/core';
@Component({
selector: 'custom-slider',
template: '<p>Value: {{ value() }}</p>'
})
export class CustomSlider {
value = input(0);
}Here, 0 is the input’s initial value when a parent does not provide one. An input declared without an initial value may be undefined, so account for that in its type and use.
#1 Best Overall
Choose between input(), @Input, and model()
| 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 template consumers | input.required<T>() |
Creates a required input signal with type T; Angular reports a missing binding during template compilation. |
| Keep decorator-style declarations or maintain existing code | @Input() |
Remains fully supported and uses the same template binding syntax. |
| Let the child change a value and propagate it to the parent | model() |
Creates a model input and matching change output for two-way binding; transforms are not supported. |
Angular’s current guide recommends signal-based inputs for new projects while confirming that the decorator-based API remains fully supported. The APIs describe different ways to declare and use inputs, not a documented performance ranking. For older Angular versions, consult documentation for that version: Angular v18 described signal inputs as developer preview.
Make an input required
Use input.required<T>() when a component cannot work correctly without a parent-provided value. Unlike an optional input that may be undefined, a required input signal has type T. Angular reports a build-time error if a template uses the component without binding the required input.
import { Component, input } from '@angular/core';
@Component({ selector: 'user-card', template: '<h2>{{ name() }}</h2>' })
export class UserCard {
name = input.required<string>();
}A parent must then provide the value, for example <user-card [name]="selectedUserName" />.
Rename an input for templates with an alias
An alias separates the class member’s name from the name used in a parent template. This is useful when the public binding name should differ from the component’s internal property name. The alias changes the template-facing name; input names are case-sensitive.
Rank #3
value = input(0, { alias: 'sliderValue' });A parent binds the alias as <custom-slider [sliderValue]="50" />. Angular also supports input aliases with @Input and through component metadata.
Convert or normalize incoming values
Use an input transform when the parent’s representation needs to be converted into the value the component reads—for example, converting a bound string to a number. The transform maps the incoming value to the input’s internal value.
value = input(0, { transform: (raw: string | number) => Number(raw) });Transforms are available for signal inputs and the @Input API. Angular recommends transforms over getters and setters when possible; avoid complex or costly setters because they may be invoked multiple times. Model inputs do not support transforms.
Recommended Free Tools
Use two-way binding when the child can change the value
A regular input passes a value from parent to child. If the child needs to update that value and propagate the change back, declare a model input. A model input creates a corresponding change output, allowing a parent to use the [(name)] binding form.
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 writable value with <custom-slider [(value)]="volume" />. Model inputs can be required or aliased, but cannot have transforms.
Input declaration rules and naming cautions
- Angular recognizes signal inputs when
inputorinput.requiredinitializes a component or directive class member. Inputs are recorded statically at compile time, so they cannot be added or removed at runtime. - Inputs are inherited when a component class extends another component class.
- Avoid input names that collide with properties on DOM elements; such a binding can be unclear about whether it refers to the component or the element.
- Angular advises against selector-style prefixes on component inputs.
For the exact API signatures and version-specific details, see Angular’s guide to component inputs, the signal input API, the Input decorator API, and the model input API. Official tutorials also demonstrate parent-to-child input binding, required inputs, and two-way binding.
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.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →
