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 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:
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 & 11import { 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" />.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
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.
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.
