Explain the difference between interpolation and property binding

Beginner

Answer

Interpolation converts component property values to strings and embeds them in HTML:

<h1>Welcome {{userName}}</h1>
<img src="{{imageUrl}}">

Property Binding sets element properties to component property values:

<h1 [textContent]="userName"></h1>
<img [src]="imageUrl">

Key Differences:

  • Interpolation is limited to string values; property binding can handle any type
  • Property binding is more secure as it prevents script injection
  • Use property binding for non-string properties like boolean, number, or object