In this post, we’ll focus on four important types of data binding in Angular applications. This will be a quick and easy demonstration of those types.

Before we get started, it will be nice to talk about what is data binding and what are those types.

Data binding is a way to communicate between the application UI and the data which comes from a component — the part you coded, your business logic. In Angular, binding is a dynamic change of the data and the view.

Types of data binding include: String Interpolation, Event binding, Property binding, and Two-Way Binding.

String Interpolation is the easiest way to output a string to your view. We have to use {{ }} double curly braces syntax for that binding type. We are able to code TypeScript expressions between those curly braces. We can type anything, as long as a String is the result of the expressions ouptut. It can be a String variable or a method, which has a return type of String. Also, other types, like Integer, are able to be represented with String Interpolation. As a result, those types can be interpreted as Strings at the end.

Unfortunately, we are not able to code multiline expressions between those double curly braces (e.g. if-else conditions). This can be considered a a disadvantage of interpolation.

We define our variables, userName,  additionalMsg, selectedCondition, and selectedTempLevel in our component.ts file, as shown below, and we can control their changes and get their value by two-way binding in our other HTML components.

String Interpolation result

The second one is property binding. With proprety binding, we can bind native HTML attributes to a property. Angular dynamically gives us a chance to change for that. We send data from our component to the view. It is an example of one-way data binding, and we can use square brackets in our code “[]“ to express it.

Property binding example

Property binding example

Parentheses signals event binding. That type is also one-way binding, but in contrast to property binding, we send the data from the view to the component (e.g. by clicking on a button). We can basically bind to all properties and events. We often call methods on event binding.

additionalMsg only changes its value according to click event on button.

Two-way binding is a little bit different, but it can be defined as the combination of two other binding types, event and property binding. This type of binding allows for the continuous synchronization of data.

Let’s see how this works in a basic application.

Before we start to code, for a nice presentation of our pages we can download Bootstrap for our project with the command below. After installation, we can see our Bootstrap library under node_modules.

We need one more step to enable Bootstrap in our project. We have to add our Bootstrap css file in the angular.json file like below. Then we can use it.

As mentioned, String Interpolation used to output our results as a string in our paragraph element.

Button is an HTML element that has some attributes like disabling it. We used property binding and bind this attribute to a property named allowClick, which also triggers an input element’s change event.

Event binding can be observed in our input elements’ change event and also on our buttons’ click event. When we click our button, a method is triggered. Also, when we start to type something in our input element, it also makes a decision to disable/enable our button. 

We can see two-way binding on our comboBox element. It is able to get a selected value and output it in our paragraph. If we initialize a value in our component, we are able to see the dynamic change of two-way binding. 



 Two-way data binding example

Two-way data binding example

Two-way data binding example

Source link

Write A Comment