Data Binding in Angular

Types of data binding

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

• From source to view

• From view to source

• In a two-way sequence of view to source to view

  | TYPE | SYNTAX | CATEGORY | | --- | --- | --- | | Interpolation
  Property
  Attribute
  Class
  Style | {{expression}} [target]="expression" | One-way from data source to view target | | Event | (target)="statement" | One-way from view target to data source | | Two-way | [(target)]="expression" | Two-way |

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 bracket ([ ]) characters, parenthesis (( )) characters, or both ([( )]) characters.

The binding punctuation of [], (), [()], and the prefix specify the direction of data flow.

• Use [] to bind from source to view

• Use () to bind from view to source

• Use [()] to bind in a two-way sequence of view to source to view

Place the expression or statement to the right of the equal sign within double quote ("") characters.

Important note:

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

In Angular, the only role of HTML attributes is to initialize element and directive state.

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

Example 1: an <input>

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

**content_copy<input type="text" value="Sarah"> //**example code

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

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

Example 2: a 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.

content_copy<button disabled>Test Button</button> //example code

Adding and removing the disabled attribute disables and enables the button. However, the value of the attribute is irrelevant, which is why 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.

Property and attribute comparison

Though you could technically 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. Consider the following:

//Example code below:

content_copy<input [disabled]="condition ? true : false"> <input [attr.disabled]="condition ? 'disabled' : null">

The first line, which uses the disabled property, uses a boolean value. The second line, which uses the disabled attribute checks for null.

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.

//Example code below:

<button type="button" (click)="deleteHero(hero)">{{name}}</button> // In this example code 'deleteHero' function is used with click event binding & 'name' variable will be rendered using interpolation.

Thanks happy coding!