Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesiTechGuides 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 a value from a parent component to a child in Angular, bind the child’s public input name in the parent template: <app-housing-location [housingLocation]="housingLocation" />. The bracketed name is the child input; the expression on the right reads a value from the parent component.
How to bind a parent value to a child component
-
Make sure the child component is available to the parent template. In a standalone component, add it to the parent component’s
importswhen needed. -
Expose an input on the child component for the value it should receive.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
In the parent template, add the child selector and bind that input with square brackets:
#1 Best Overall
<app-housing-location [housingLocation]="housingLocation" />
In this example, the parent’s housingLocation expression supplies a value to the child’s housingLocation input. Angular evaluates the expression as a property value; it does not treat it as the literal text “housingLocation.” The child can then use the received value in its own template or logic. This is the pattern shown in Angular’s Add property binding to components tutorial.
What the square brackets mean
The general form is [target]="expression". The brackets tell Angular to evaluate the expression and assign its value to a target property. Depending on the target, that property can belong to a native HTML element, an Angular component input, or a directive. Angular updates the bound property when the expression’s value changes. See the official guide to binding dynamic text, properties and attributes.
For a component, the target must be an input exposed by that child. Its public template name can differ from the corresponding class property name if the input is aliased. Use the public name in the parent template. Angular’s Component API reference documents input metadata, including aliases, required inputs, and transforms; projects are not limited to a single input declaration style.
Choose between interpolation, property binding, and attribute binding
| Form | What it updates | Typical use |
|---|---|---|
Interpolation, such as {{ '{{ value }}' }} |
Text rendered in the template | Displaying a dynamic value as text |
Property binding, such as [target]="expression" |
A DOM property or Angular component/directive input | Setting a value that the element or child component consumes |
Attribute binding, such as [attr.attribute-name]="expression" |
An HTML attribute | Setting an attribute rather than a DOM property |
These forms are related but not interchangeable: choose according to whether you want to render text, set a property, or set an HTML attribute. Angular explains the distinctions in its template binding guide.
Rank #3
Keep the direction of data flow clear
A property binding to a child input passes data from parent to child. It does not, by itself, send a change back to the parent. For child-to-parent communication, handle an output event separately; Angular’s custom events with outputs guide covers that pattern. Custom events do not bubble up the DOM. Angular recommends the output function for new projects and retains the decorator-based @Output API.
Two-way binding combines property and event binding, using [()], when a value needs to flow in both directions. It is not required for a one-way parent-to-child input. For native form controls, Angular’s two-way binding guide demonstrates [(ngModel)], which requires importing FormsModule; component-to-component two-way binding requires additional setup.
Binding an input on a programmatically created component
When a component is created programmatically rather than declared in a template, Angular provides inputBinding() for configuring an input through the component’s bindings configuration. The template form [inputName]="expression" applies to a child declared in a template; see Angular’s guide to programmatically rendering components for the dynamic-creation approach.
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.
