Data Binding in Angular

AngularJS offers powerful data binding features, fostering real-time synchronization between the model and view components. Unlike React, Angular supports both one-way and two-way binding, enhancing code flexibility and reducing coupling. Essentially, data binding in Angular ensures that the view consistently reflects changes in the model, treating it as the definitive source of truth. This mechanism amplifies dynamism and interactivity in applications, streamlining communication between components and their associated views. In essence, data binding stands as a pivotal element in AngularJS, facilitating seamless and efficient software development processes.

Data Binding and HTML

HTML may be customized by using attributes and string values. In the following example, the class, src, and disabled attributes are used to change the <div>, <image>, and <button> components, respectively.

Use data binding to control things like the state of an input:

It's worth noting that the binding is to the disabled property of the input's DOM element rather than the attribute. Data binding in angular works with DOM elements, components, and directive properties, non HTML attributes.

Interpolation

Angular features a string interpolation binding, a specific variant of the normal property binding that is used to incorporate expression results in the text content of host elements.

To see why this particular binding is beneficial, consider what binding is necessary when the usual property binding is utilized.

Example

Output

HTML Attributes and DOM Properties

HTML attributes and DOM properties are distinguished by Angular binding.

Attributes are used to initialize DOM properties and can be used to adjust an element's behavior. Properties are features of DOM nodes.

HTML attributes serve only to initialize the element and directive state in Angular. When you construct a data binding in angular, you are only interacting with the destination object's DOM attributes and events.

Example 1: An Input Tag

When the browser renders the input in the above example, it will create a corresponding DOM node with the value Foo.

If the user changes the value to Bar, we will see Bar in the DOM value. However, if we use input.getAttribute('value'), it will return the initialized value, which is Foo.

The HTML attribute value indicates the starting point, whereas the DOM value property represents the current value.

Example 2: A Disabled Button

The disabled attribute of a button is set to false by default, indicating that the button is active. When you add the disabled attribute, you are setting the disabled property of the button to true, which disables it.

The disabled property is added and removed to disable and enable the button. The value of the property, however, is irrelevant, which is why you cannot activate a button by writing <button disabled="false">Submit</button>; it is disabled.

Set the disabled attribute instead to control the status of the button.

Property and Attribute Comparison

Technically, [attr.disabled] sets the attribute binding; it depends on whether the value is null. In property binding, the value must be a boolean value.

Class and Style Binding

Class and style bindings are used to dynamically add and delete CSS class names from an element's class property and to establish styles.

Class Binding

• Single CSS class

  code

• Multiple CSS class

  code

Style Binding

• Single CSS style

  code

• Multiple CSS styles

  code

Types of Data Binding

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

From Source to View

One-way data bindings are used to generate content for the user and are the basic building block for Angular templates. The term one-way refers to the fact that the data flows in one direction, which means that data flows from the component to the data binding so that it can be displayed in a template.

• Use [ ] or {{ }} to bind from source to view

From View to Source

Event bindings are also one-way binding, but it's from view to the source when any changes happen on the view, such as click event.

• Use ( ) to bind from view to source

In a Two-Way Sequence of View to Source to View

This combination of brackets—known as the banana-in-a-box —indicates a two-way binding, where data flows in both directions between the target and the destination specified by the expression,

Bindings can be combined to create a two-way flow of data for a single element, allowing the HTML document to respond when the application model changes and also allowing the application to respond when the element emits an event.

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

Binding Types and Targets

Property This is the standard property binding used to set a property on the JavaScript object that represents the host element in the Document Object Model (DOM).

Attribute This is the attribute binding, which is used to set the value of attributes on the host HTML element for which there are no DOM properties.

Class This is the special class property binding, which is used to configure the class membership of the host element.

Style This is the special style property binding, which is used to configure the style settings of the host element.