{{announcement.body}}
{{announcement.title}}

Data Binding in Angular

DZone 's Guide to

Data Binding in Angular

In this article, we discuss data binding in Angular and focus on String Interpolation, Event binding, Property binding, and Two-Way Binding.

· Web Dev Zone ·
Free Resource

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.

HTML


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.

TypeScript


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.

HTML


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.

HTML


TypeScript


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.

HTML


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.

Shell


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.

JSON


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

HTML


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.

HTML


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. 

HTML


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. 

HTML


app.component.html

HTML


app.component.ts

TypeScript

 Two-way data binding example

Two-way data binding example

Two-way data binding example


Topics:
angular ,data binding ,spa ,string interpolation ,tutorial ,two-way binding ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}