property binding vs interpolation code example

Example: difference between property binding and interpolation

Interpolation uses the {{ expression }} to render the bound value to the component’s template. Interpolation is a special syntax that Angular converts into a property binding

Property binding uses [] to send values from the component to the template. Property Binding: to set an element property to a non-string data value, you must use property binding

Example :

we are disabling a button by binding to the Boolean property isDisabled.

<button [disabled]='isDisabled'>Try Me</button>
interpolation instead of property binding, the button will always be disabled irrespective of isDisabled class property value is true of false.

<button disabled='{{isDisabled}}'>Try Me</button>
canonical form which is an alternate syntax to square bracket.

 <button bind-disabled='isDisabled'>Try Me</button>