Data binding is the 'wiring' that connects your application's logic to its user interface, ensuring your data is always perfectly synchronized with the view.
1Interpolation vs Property Binding
While both project data into the view, they have different use cases. Interpolation ({{ }}) is strictly for converting values into strings and embedding them in text. Property Binding ([property]) is much more powerful; it allows you to pass actual data types (like booleans or objects) directly to DOM properties. Use interpolation for text content, and property binding for attributes like src, href, or custom component inputs.
2The Attribute Binding Exception
Sometimes, an HTML element has an attribute that doesn't map directly to a DOM property (like colspan in tables or ARIA attributes for accessibility). In these cases, regular property binding won't work. Angular provides the [attr.name] syntax as a workaround, allowing you to bind directly to the underlying HTML attribute instead of the JavaScript property.
