Data binding automatically keeps your page up-to-date based on your application’s state. You use data binding to specify things such as the source of an image, the state of a button, or data for a particular user.

Data binding works with properties of DOM elements, components, and directives, not HTML attributes.

HTML attributes and DOM properties

Angular binding distinguishes between HTML attributes and DOM properties. Attributes initialize DOM properties and you can configure them to modify an element’s behavior. Properties are features of DOM nodes.

• A few HTML attributes have 1:1 mapping to properties; for example, id.
• Some HTML attributes don’t have corresponding properties; for example, aria-*.
• Some DOM properties don’t have corresponding attributes; for example, textContent.

Remember that HTML attributes and DOM properties are different things, even when they have the same name.

Examples:

1. <input>:

When the browser renders <input type="text" value="Singhak">, it creates a corresponding DOM node with a value property and initializes that value to “Singhak”.

<input type="text" value="Singhak">

When the user enters “Storywalla” into the <input>, the DOM element value property becomes “Storywalla”. However, if you look at the HTML attribute value using input.getAttribute('value'), you can see that the attribute remains unchanged—it returns “Singhak”.

The HTML attribute value specifies the initial value; the DOM value property is the current value.

2. disabled button

A button’s disabled property is false by default so the button is enabled.

When you add the disabled attribute, you are initializing the button’s disabled property to true which disables the button.

<button disabled>Test Button</button>

You cannot enable a button by writing <button disabled="false">Still Disabled</button>. To control the state of the button, set the disabled property instead.

Also Read: Angular: All about pipes template in angular

Property and attribute comparison:

Technically we can set the [attr.disabled] attribute binding, the values are different in that the property binding must be a boolean value, while its corresponding attribute binding relies on whether the value is null or not.

<button[disabled]="condition ? true : false">Disabled Attr</button>
<button[attr.disabled]="condition ? 'disabled' : null">Disabled Prop</button>

Generally, use property binding over attribute binding as a boolean value is easy to read, the syntax is shorter, and a property is more performant.

Types of data binding:

Angular provides three categories of data binding according to the direction of data flow:

• From the source to view
• From view to source
• In a two way sequence of view to source to view

Type: Interpolation, Property, Attribute, Class, Style
Category: One-way from data source to view target
Syntax:

{{expression}}
[target]="expression"
bind-target="expression"

Type: Event
Category: One-way from view target to data source
Syntax:

(target)="statement"
on-target="statement"

Type: Two-way
Category: Two-way
Syntax:

[(target)]="expression"
bindon-target="expression"

Also Read : Angular: Create custom pipe in Angular

Binding types other than interpolation have a target name to the left of the equal sign. The target of a binding is a property or event, which you surround with square brackets, [], parentheses, (), or both, [()].

When you write a data binding, you’re dealing exclusively with the DOM properties and events of the target object.

Reference: Angular – Binding syntax
Code: Singhak/AngularConcepts

FAQ