Recommended Free Tools
Use {{ expression }} to display changing text, [property]="expression" to set a DOM or Angular instance property, and [attr.name]="expression" to set an HTML attribute. Choose the syntax based on what you need to update: rendered text, an object property, or an attribute in the markup.
Choose the binding syntax that matches the target
| What you need | Syntax | What Angular updates |
|---|---|---|
| Display dynamic text | {{ expression }} |
Text rendered in the template |
| Set an element, component, or directive property | [property]="expression" |
A DOM property, Angular component input/property, or directive property |
| Set an HTML attribute | [attr.attributeName]="expression" |
An HTML attribute; a null value removes it |
| Toggle one CSS class | [class.className]="condition" |
A particular class, according to the condition’s truthiness |
| Set a CSS property | [style.property.unit]="expression" |
A style property, optionally with a unit |
| Set string-valued ARIA text | [aria-label]="expression" |
An ARIA attribute; a null value removes it |
Angular describes a binding as “a dynamic connection between a component’s template and its data.” Its binding guide covers the syntax and how bindings keep rendered content connected to component data.
As an Amazon Associate I earn from qualifying purchases.
Display changing text with interpolation
Place an expression inside double curly braces to render its value as text:
<p>Your color preference is {{ theme() }}.</p>Angular converts the expression result to a string. Objects and arrays use their toString method, so interpolation is most useful when the expression produces the text you actually want a reader to see.
#1 Best Overall
For values that change over time, the current Angular guide recommends reading signals in the template. For example, if theme is a signal, theme() reads its current value. Angular tracks that template read and updates the rendered page when the signal changes.
Set DOM, component, and directive properties with square brackets
Square brackets bind an expression to a property on an element or Angular instance. The target depends on the name: it may be a native DOM property, a component input/property, or a directive property.
<button [disabled]="isFormValid()">Save</button>
<my-listbox [value]="mySelection()" />
<img [ngSrc]="profilePhotoUrl()" alt="The current user's profile photo" />In these examples, disabled is a button DOM property, value is a property on the my-listbox component, and ngSrc is a directive property. Confirm that the component or directive exposes the property name you bind.
Use attr. when the target is an HTML attribute
Some attributes have no corresponding DOM property, including certain SVG attributes. Prefix the attribute name with attr. to tell Angular to set the attribute explicitly:
Rank #3
<ul [attr.role]="listRole()"></ul>If an attribute binding evaluates to null, Angular removes that attribute. Use this form when the attribute itself—not a similarly named object property—is what you need to control.
Interpolation can also appear inside property values. Angular treats interpolation in properties and attributes as property binding; for an explicit HTML attribute binding, use the attr. prefix. The official binding guide explains this distinction.
Bind classes and styles with their specialized forms
Toggle a class
Bind a specific class to a truthy or falsey expression. Angular adds or removes that class as the condition changes:
<ul [class.expanded]="isExpanded()"></ul>Class bindings can also accept strings, arrays, or objects. When an array or object is bound, Angular compares the previous and current values by reference (===). If you mutate an existing array or object without changing its reference, the binding may not reflect the change; create a new array or object when updating its contents.
Set a style property
Use a style binding for one CSS property. Add a unit suffix when the expression is a number that needs a specific unit:
<section [style.height.px]="sectionHeightInPixels()"></section>Style bindings can also accept a string or object. If several class or style bindings could affect the same result, Angular applies its precedence rules; it does not guarantee a particular order for classes in the rendered output.
Bind ARIA values with the right value shape
For string-valued ARIA text, use an ARIA binding such as [aria-label]. A null value removes the ARIA attribute. For ARIA cases that take structured values, use an ordinary property binding where appropriate rather than assuming every ARIA value is a string attribute.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Learn the syntax in Angular’s tutorials
Angular’s template tutorial introduces interpolation for displaying dynamic data. Its property-binding lesson introduces passing dynamic data to components.
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.
