Free tools Windows power users keep installed
One-click scans. No signup required.
To pass a value from a parent component to a child in Angular, put the child’s input name in square brackets in the parent template and bind it to an expression: [inputName]="parentValue". For example, <app-housing-location [housingLocation]="housingLocation" /> passes the parent’s housingLocation value to the child’s housingLocation input.
How component property binding works
In [target]="expression", the bracketed target is the property Angular should update, and the expression on the right is evaluated in the parent component’s context. Angular supplies that value to the child input and updates the property when the bound value changes. Unlike a plain text value, the expression is not treated as a fixed string.
As an Amazon Associate I earn from qualifying purchases.
For the housing-location example, the left-hand housingLocation is the child’s public input name; the right-hand housingLocation is a property on the parent component. The tutorial’s sample data uses a HousingLocationInfo object with fields such as id, name, city, state, photo, availableUnits, wifi, and laundry. Those fields are specific to that example, not requirements for Angular inputs. See Angular’s property-binding tutorial.
Set up the child input and parent template
The child component must expose an input whose public name matches the template binding. The parent template must also have access to the child component’s selector. In the official tutorial’s standalone-component example, that means importing the child component into the parent component before using its tag.
#1 Best Overall
- Expose an input on the child. Give the child a public input name, such as
housingLocation. Angular supports input metadata including aliases, required-input configuration, and transforms; choose the declaration style that fits your project. - Make the child available to the parent template. For a standalone parent, include the child component in the parent’s template dependencies.
- Bind the parent value in the template. Add
[housingLocation]="housingLocation"to the child element. Use the public input name inside the brackets and the parent expression on the right.
Angular’s Component API documents component metadata and input configuration. Its binding guide explains how template bindings connect data to properties.
Choose the right kind of binding
| Syntax or form | What it updates | Typical use |
|---|---|---|
{{value}} |
Renders a dynamic value as text | Showing a value in template content |
[property]="expression" |
Sets a DOM property or a component or directive property/input | Passing a changing value to a child input |
[attr.name]="expression" |
Sets an HTML attribute | When the target specifically needs attribute binding |
These forms are related but not interchangeable: interpolation displays text, property binding assigns a property, and attribute binding targets an HTML attribute. Angular’s template binding guide describes the distinctions.
Understand the direction of data flow
A property binding to a child input passes data from parent to child. It does not by itself send edits or other changes back to the parent. For a child-to-parent notification, the child can emit an output event and the parent can listen with parentheses. Angular’s outputs guide covers custom events; those custom events do not bubble through the DOM.
Two-way binding combines property and event binding, using [()]. It is a separate pattern, not a requirement for passing a value into a child. For native form controls, Angular’s two-way binding guidance includes [(ngModel)] and requires importing FormsModule. Component-to-component two-way binding needs the relevant input and output setup.
Rank #3
Bind inputs when creating a component programmatically
A child written directly in a template uses [inputName]="expression". If Angular creates the component programmatically, the inputBinding() API can configure an input through the component’s bindings configuration. This is for dynamic component creation, rather than a replacement for ordinary template syntax.
Quick Recap
Common mistakes to check
- Input name mismatch: Confirm that the bracketed name is the child’s public input name. If the input is aliased, use the alias exposed to templates.
- Child selector unavailable: Ensure the parent template has the child component among its dependencies; standalone parents declare template dependencies in
imports. - Expression mistaken for a literal: Keep the parent property or expression on the right side, without turning the intended value into a quoted fixed string.
- Expecting updates to travel both ways: A property binding supplies a value to the child. Use an output event or a deliberately configured two-way binding when the parent also needs to receive changes.
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.
