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
To pass data from a parent Angular component to a child, declare a child input with input() or input.required(), bind a parent value to it in the parent template, and read the input signal by calling it. For example, the child can declare name = input.required<string>(); its parent supplies [name]="productName"; and the child template displays {{ name() }}.
1. Declare an input signal in the child
Import input from @angular/core and initialize the input in the child component or directive class. Angular records inputs at compile time; they are not dynamically added or removed at runtime.
import { Component, input } from '@angular/core';
@Component({
selector: 'product-card',
template: `
<h2>{{ name() }}</h2>
@if (available()) {
<p>Available</p>
}
`
})
export class ProductCardComponent {
name = input.required<string>();
available = input(true);
}The name input is required, while available defaults to true. An input declared as input<T>() without a default can be undefined; when you supply a default value, its type is inferred from that value.
Choose required or optional based on the child’s contract
- Use
input.required<T>()when the child cannot function without a value. Angular reports a build-time error if the component is used without that required input. - Use
input<T>()when the parent may omit the value. Provide a default if the child should use a defined value when none is bound.
2. Bind the parent’s value in its template
Use property binding to pass a parent expression to the child input. The binding name matches the child input’s public name.
#1 Best Overall
<product-card [name]="productName" />A parent can also pass a fixed string with a static attribute:
<product-card name="Static Product" />When productName changes in the parent, the child input reflects the latest bound value. In Angular’s signal-input tutorial, the parent passes a value this way; the example illustrates the data flow, not a performance benchmark.
3. Read the input signal
An input signal is read by invoking it. In a child template, use {{ name() }}; in class code, use this.name(). The signal reflects the latest value supplied by the parent, but a standard input signal is read-only in the receiving component. The child should not assign a new value to it.
Input names are case-sensitive, as Angular’s official guide notes. Match the exact public input name in the parent binding.
Rank #3
4. Derive values or normalize incoming values
Use computed() for values derived from inputs
If the child needs a value calculated from an input, derive it with computed() rather than trying to write to the input signal. This keeps the parent-provided value read-only while allowing the child to expose a derived signal.
Use input transforms to normalize values
An input transform can normalize values as they arrive from template bindings. Angular documents booleanAttribute and numberAttribute as examples. Use a transform when the component needs a coerced or normalized value rather than the bound value as-is.
Use an alias for a different public template name
An alias changes the name used in the parent template without changing the class property name. Avoid aliases that collide with native DOM property names.
5. Decide whether the child needs to update the value
Use input() when the parent owns the value and the child only reads it. If the child also needs to write a value and propagate changes back through two-way binding, use model(). A model input produces a corresponding Change output.
6. Use signal inputs in new code or keep supported decorators
Angular recommends signal-based input() declarations for new projects. Decorator-based @Input() remains fully supported, so existing components do not need to be converted simply to remain valid.
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.
