Back to course

Property Binding [ ]

The Complete Angular Developer: From Zero to Hero

11. Property Binding [ ]

Interpolation only works for displaying string values in text content. Property binding is used to set the value of an HTML element's property (e.g., src, disabled, class) dynamically from a component property.

Syntax

Property binding uses square brackets ([ ]) around the target element property. The value inside the quotes is a TypeScript expression that resolves to the required value.

html <element [property-name]="componentExpression">

Example: Binding Standard HTML Properties

Component Class:

typescript export class ImageComponent { imagePath: string = 'assets/logo.png'; altText: string = 'Angular Logo'; isButtonDisabled: boolean = true; }

Template:

html

<img [src]="imagePath" [alt]="altText">

<button [disabled]="isButtonDisabled">Submit

Accessibility Check

Property vs. Attribute Binding

Angular favors binding to the DOM Property, not the HTML Attribute.

  • Attribute: Defined in HTML (e.g., id, type).
  • Property: Defined in the DOM tree (e.g., value, disabled).

For example, the HTML attribute value sets the initial value, but the DOM property value reflects the current value (which changes as the user types). Angular always binds to the property unless you explicitly use [attr.name].