What is Property Binding - Interpolation vs Property Binding

What is Property Binding?

Property Binding is used to bind component data to HTML element properties.


Definitions:

  1. Property Binding binds component data to DOM elements.
  2. Property Binding binds component data to HTML element properties.


Property Binding Syntax

Property Binding uses square brackets [ ].

Example:

<button [disabled]="btnDisable">Click Me</button>
  1. disabled → HTML element property
  2. btnDisable → data coming from the TypeScript component


Why Property Binding is Needed?

Some HTML properties (like disabled, readonly, src) work with boolean or dynamic values.

Interpolation treats values as string, not actual boolean values.


Example 1: Button Disable (Interpolation vs Property Binding)

Using Interpolation (Wrong for boolean properties)

<button disabled="{{btnDisable}}">Click Me</button>
  1. Even if btnDisable is false, the button remains disabled.
  2. Reason: Interpolation treats the value as a string.


Using Property Binding (Correct)

<button [disabled]="btnDisable">Click Me</button>
  1. true → button disabled
  2. false → button enabled


Toggle Button Example

HTML

<button (click)="toggle()">Toggle</button>

TypeScript

toggle(){
this.btnDisable = !this.btnDisable;
}
  1. Property Binding button toggles correctly
  2. Interpolation button does not respond properly


Example 2: Input Readonly

Using Interpolation

<input type="text" readonly="{{inputReadonly}}">
  1. Even when value is false, input remains readonly


Using Property Binding

<input type="text" [readonly]="inputReadonly">
  1. true → readonly
  2. false → editable


Important Point from Video

Many HTML properties do not work properly with boolean values when using interpolation.

In such cases, Property Binding must be used.


Example 3: Image Source

Using Interpolation (Works but not recommended)

<img src="{{url}}" alt="">


Recommended: Property Binding

<img [src]="url" alt="">
  1. src is an HTML property
  2. Property Binding is the recommended approach


When to Use Interpolation?

Use Interpolation when:

  1. Displaying normal text
  2. Showing data inside tags like h1, p, span
  3. Writing expressions inside HTML content
  4. One-way binding from component to view


Example:

<h1>{{title}}</h1>


When to Use Property Binding?

Use Property Binding when:

  1. Binding data to HTML element properties
  2. Working with boolean values
  3. Working with dynamic values
  4. Binding objects or URLs
  5. Binding to DOM properties like:
  6. disabled
  7. readonly
  8. src
  9. value