To pass data from a parent Angular component to a child, declare an input with input() in the child and bind the parent’s value in its template. Read the input signal by calling it: name() in TypeScript or {{ name() }} in the child template. Use input.required() when the child must receive a value.
Declare an input signal in the child
Import input from @angular/core and call it in a component or directive property initializer. Angular records inputs at compile time; they are not added or removed dynamically at runtime. See the Angular input guide and input API reference.
As an Amazon Associate I earn from qualifying purchases.
import { Component, input } from '@angular/core';
@Component({
selector: 'product-card',
template: `
<h2>{{ name() }}</h2>
@if (available()) {
<p>In stock</p>
}
`,
})
export class ProductCardComponent {
name = input.required<string>();
available = input(true);
}The required name input must be supplied wherever this component is used. Angular reports a build-time error if it is missing. The optional available input defaults to true; its type is inferred from that default.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Bind the parent value in its template
Use property binding to pass a parent expression to the child’s public input name:
#1 Best Overall
<product-card [name]="productName" />If productName changes, the child input reflects the latest value. When the parent value is a signal, bind its current value—for example, [name]="productName()"—so updates propagate through the binding. The child reads the input signal by invoking it.
A static attribute also supplies a value when appropriate:
<product-card name="Static Product" />Angular’s first-app inputs lesson demonstrates this form alongside parent-to-child input binding.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose required, optional, or defaulted inputs
- Required: Use
input.required<T>()when the child cannot function without the value. The parent must bind it. - Optional without a default: Use
input<T>()when omission is valid. Its value can beundefined, so account for that in the type and template. - Optional with a default: Use
input(defaultValue)when the child has a sensible fallback. The default determines the inferred type.
Read or derive input values
Input signals are read-only in the receiving component. In class code, call the signal, such as this.name(); in a template, use {{ name() }}. This gives the latest value supplied by the parent without assigning to the input in the child.
Rank #3
When the child needs a value calculated from one or more inputs, use computed() rather than copying the input into separate mutable state. Angular’s input guide explains deriving values from inputs.
Normalize values with input transforms
An input transform can coerce or normalize values as they arrive. Angular documents booleanAttribute and numberAttribute as examples. Use a transform when the component needs a normalized value rather than the raw bound value; transforms should be pure. The transform belongs in the input declaration, as described in the input guide.
Use an alias when the public binding name should differ
An alias changes the name used in the parent template without changing the child’s class property name. For example, the child can keep a property named itemName while exposing a different template input name. Choose aliases carefully: Angular advises avoiding names that collide with native DOM properties. Input names are case-sensitive, as the official guide states.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsUse model inputs for child-to-parent updates
Standard input() is for values the parent owns and the child reads. If the child must also update a value and propagate that change through two-way binding, use model() instead. A model input creates a corresponding Change output. See Angular’s input and model inputs guide for the API details.
Keep existing decorator inputs or use signals for new code?
Angular still fully supports decorator-based @Input(), so existing components do not need to be rewritten just to remain valid. Angular recommends signal-based input() for new projects. The tutorial and Component API reference provide related component context.
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.
