Software systems to innovate and grow

Angular Core Concepts: Data Binding

By Engineering Team October 28, 2019 10 mins read

Web applications need to be interactive. Say for instance as a developer you are interested in transmitting the properties from the components, to the DOM(View), so that you may change the background color of your site. In addition, you may have the need to communicate events from the View to the component, like when a button is clicked, triggering some particular action. Without interactive abilities, you would not be able to build or navigate a functioning application.

Data binding is considered a core feature of the software development language, it includes a feature where defining communication between the view and the component creates the logic and is in charge of synchronizing each. In other words, data binding is a mechanism used for coordinating display views (what users see) with the application’s data values. The developer simply declares bindings between binding sources and the target HTML elements, letting Angular do the work. Let’s get into how Data Binding works, and some of the core concepts that go into it.

Binding Targets

In the normal course of HTML development, the first step is to create a visual structure composed of HTML elements and modify those elements by setting element attributes with string constants.

With Angular, you still create a structure and initialize the attribute values by using Angular templates. The difference is once you start using data binding, you are no longer working with HTML attributes. This time, instead of setting those attributes, you are setting the properties of DOM elements, components, and directives.

In the Angular world, the only role of attributes is to initialize the elements and directives states. When you define a data binding, you are dealing exclusively with properties and events of the target object, the HTML attributes should effectively disappear.

Types of Data Binding in Angular

There are 4 different types of bindings:

  1. String Interpolation
  2. Property Binding
  3. Event Binding
  4. Two Way Data Binding

1. String Interpolation: a type of one-way data binding where a property from the component is put between a set of double of curly brackets. Angular then replaces the component property with the string value based on when the view is rendered.

2: Property Binding: this type of binding allows you to bind the view of the template expression. It is used to assign values to HTML properties. For example, HTML attributes or in custom Angular components can be used to set the input properties. In Angular, we can use square brackets around the property we want to bind, while the value is defined inside double-quotes.

3: Event Binding: this binding is used to handle the result of user interactions with our application. Every time a user does something such as clicking a button, entering text into an HTML input, etc., it generates a series of events, which are emitted from the presentation layer and need to be handled in the component in order to perform a given action and generate a given response.

4: Two-Way Data Binding: this is a combination of both Property and Event binding. With two-way data binding, Angular allows a developer to modify a property value in a bidirectional way. The result is easier maintenance and continuous synchronization of data from view to the component and component to the view, i.e. changes made in the component’s data should be reflected on the view and changes made on the view should immediately update the component data.

In addition, Angular has a special optional directive called ngModel. In this case, the square brackets can be used because it’s a property. We also use the parentheses because the direction deals with a change of events. This syntax is known as Banana in a Box ([()]).

Binding Syntax Overview

Binding types are classified and grouped into three categories, which identified by the direction of data flow. The different categories move from the source-to-view, and from view-to-source. In the two-way sequence, it becomes view-to-source-to-view.

One-way: from data
source to view target
Interpolation,
Property, Attribute,
Class, Style
One-way: from view
target to data source
Event
Two-way Two-way

Binding: Targets

The following table contains all the definitions of possible targets to each type of binding.

Property Element property, Component property, Directive property
Event Element event, Component event, Directive event
Two-way Event and property
Attribute Attribute*
Class Class property
Style Style property

Attribute Directives*

Attribute directives are used to change the appearance or behavior of an HTML element, component or another directive. Let’s review them some of them that are already built-in to the Angular framework.

ngClass – add and remove a set of CSS classes

ngStyle – add and remove a set of HTML styles

ngModel – two-way data binding for a HTML form element

What Can Data Binding Do For You?

Data binding is a mechanism used for coordinating what users see. With application data values, as a developer, you simply declare bindings between binding sources and target HTML elements and sit back while the framework does the work. This key feature of Angular is extremely useful and powerful, allowing you to keep synchronicity between the components and the views simple.