Chapter 3.2☕ 15 min read

Property Binding [ ]

Property binding lets you control HTML elements from your TypeScript code.

01What is Property Binding

Property binding uses square brackets [targetProperty]="sourceValue" to set DOM element properties from your component class.

"Property binding = remote control — TypeScript se HTML element ko control karo." Just like a remote control lets you change TV settings, property binding lets you control element properties from TypeScript.

Key difference from interpolation: property binding can set non-string values. You can pass booleans, objects, numbers, etc. — not just strings.

<img [src]="imageUrl">      <!-- Sets src property -->\n<button [disabled]="isDisabled">  <!-- Sets boolean property -->

02Property Binding vs Interpolation

Both interpolation and property binding can set string properties, but they differ in important ways:

Feature	Interpolation {{ }}	Property Binding [ ]
Strings	✅ Works	✅ Works
Booleans	❌ Sets string "true"	✅ Sets boolean true
Numbers	❌ Sets string "299"	✅ Sets number 299
Objects	❌ Sets "[object Object]"	✅ Passes object reference

<img src="{{ imageUrl }}">       <!-- Works for strings -->\n<img [src]="imageUrl">           <!-- Same result, better -->\n<button disabled="{{ isTrue }}">  <!-- disabled="true" (string!) -->\n<button [disabled]="isTrue">     <!-- disabled (boolean!) ✅ -->

"Interpolation sirf string dikhata hai, property binding kuch bhi set kar sakta hai."

03Common Property Binding Examples

Here are the most common property binding patterns you'll use daily:

[src]="imageUrl" — Set image source
[href]="linkUrl" — Set link URL
[disabled]="isFormInvalid" — Enable/disable button
[class.active]="isActive" — Toggle a CSS class
[style.color]="textColor" — Set inline style
[hidden]="!isVisible" — Show/hide element
[attr.aria-label]="label" — Set any HTML attribute
[innerHTML]="htmlContent" — Set inner HTML (careful with XSS!)

Notice the pattern: bracket wraps the target, equals sign, then the source expression.

04Binding to Custom Component Properties

Property binding's real power is connecting to custom component @Input() properties:

<app-biryani [name]="biryaniName" [price]="500"></app-biryani>

In the child component:

@Component({...})\nexport class BiryaniComponent {\n  @Input() name: string = '';\n  @Input() price: number = 0;\n}

The [name] in the parent template maps to @Input() name in the child component. Whatever value the parent passes, the child receives.

"Parent se child ko data bhejna = property binding ka asli power." This is the foundation of component communication in Angular.

05One-Way Data Flow

Property binding is ONE-WAY — data flows from TypeScript → Template. Not the other way around.

<input [value]="myName">  <!-- TS → Input: value shows myName -->\n<!-- Input → TS: ☝️ DOES NOT update myName when user types -->

"Ek taraf jaata hai — wapas nahi aata." If you change the TypeScript property, the template updates. But user interaction with the template does NOT update the TypeScript property automatically.

For two-way binding (TypeScript ↔ Template), you need:

[(ngModel)] — template-driven forms (Chapter 3.4)
model() — new Angular 17+ signal-based approach
[(value)] — custom two-way binding with banana-in-box syntax

Key Takeaways

✅ Property binding [ ] sets DOM element properties from TypeScript values.
✅ Use [binding] for non-string values (booleans, numbers, objects). Interpolation only for strings.
✅ Common bindings: [src], [disabled], [class.active], [style.color], [hidden].
✅ Bind to custom @Input() properties to pass data from parent to child components.
✅ Property binding is one-way: TypeScript → Template. Use [(ngModel)] for two-way.

Previous3.1 — Interpolation 📋 All Chapters Next Chapter3.3 — Event Binding →