What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
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
Use {{ expression }} to display dynamic text, [property]="expression" to set a DOM, component, or directive property, and [attr.attributeName]="expression" to set an HTML attribute. Choose the form that matches what you are changing: a property belongs to an element or Angular instance, while an attribute is part of the element’s markup. When an attribute binding evaluates to null, Angular removes that attribute.
Choose the binding syntax for the job
| Need | Syntax | What it changes |
|---|---|---|
| Display changing text | {{ expression }} |
Text rendered in the template |
| Set an element or Angular instance property | [property]="expression" |
A DOM property, component property or input, or directive property |
| Set an HTML attribute | [attr.attributeName]="expression" |
An attribute; a null value removes it |
| Toggle one CSS class | [class.className]="condition" |
A specific class, based on 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; null removes it |
Angular describes a binding as “a dynamic connection between a component’s template and its data.” The distinction between property and attribute syntax matters: square brackets alone bind to a property, while the attr. prefix explicitly targets an HTML attribute. Angular’s binding guide explains these forms.
Display changing text with interpolation
Wrap a template expression in 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 for displaying text rather than setting an element property or attribute.
#1 Best Overall
Keep changing values reactive
For values that change over time, read a signal in the template. Angular tracks that read and updates the rendered page when the signal changes. For example, if theme is a signal, {{ theme() }} reads its current value. The current binding guide recommends signals for template values that change; a plain field that changes is not guaranteed to update in the same way.
Bind DOM, component, and directive properties
Use square brackets around a property name when the target is a property rather than text or an explicitly named HTML attribute:
<button [disabled]="isFormValid()">Save</button>
<my-listbox [value]="mySelection()" />
<img [ngSrc]="profilePhotoUrl()" alt="The current user's profile photo" />In these examples, [disabled] targets the button’s DOM property, [value] targets the Angular component’s property or input, and [ngSrc] targets a directive property. The expression supplies the value Angular assigns to that target.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteBind HTML attributes explicitly
Use attr. inside the brackets when you need to set an HTML attribute. This form is useful for attributes—including some SVG attributes—that do not have a corresponding DOM property:
Rank #3
<ul [attr.role]="listRole()"></ul>If the expression returns null, Angular removes the attribute. Interpolation inside property values is treated as property binding; use the explicit attr. form when the target must be an attribute.
ARIA values
For string-valued ARIA text, a binding such as [aria-label]="label()" sets the ARIA attribute, and a null value removes it. Some ARIA cases use structured values; use an ordinary property binding where that value shape calls for it rather than assuming every ARIA binding is a string.
Bind classes and styles
Toggle a class
Bind an individual class to a condition. Angular adds the class when the condition is truthy and removes it otherwise:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →<ul [class.expanded]="isExpanded()"></ul>Class bindings can also accept strings, arrays, and objects.
Set a style property
Bind an individual CSS property, adding a unit suffix when needed:
<section [style.height.px]="sectionHeightInPixels()"></section>Style bindings can also accept a string or object.
Update array and object bindings by reference
For class or style bindings that receive an array or object, Angular compares the previous and current values by reference (===). If you change the contents, create a new array or object so the binding can detect the changed reference.
Understand class and style collisions
When multiple class or style bindings conflict, Angular resolves them according to its precedence rules. It does not guarantee a particular order for classes in the rendered output. Avoid relying on class order or on conflicting bindings to produce a specific result.
Learn the syntax in Angular’s tutorials
Angular’s official tutorial introduces interpolation for displaying dynamic data. A separate lesson introduces property binding for 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.
