Angular: Communicating Data through Binding

Many times you will want to communicate data from your component’s class to its view, from the view to its class, or both at the same time. For this we have data binding.

Data binding is used to specify things like the source of an image, the state of a button, or the data for a particular user.

Remember that in Angular we have for each component, a basic structure composed of the class (the *.ts file referred in the official documentation as “the source”), the view or template (the *.html file) and the styles file (the *.css file) in which we are not interested right now.

Depending on the origin of the communication we have 3 biding alternatives.

From the Class to its View (Data binding)

According to Angular’s official documentation, we can use variable interpolation, and property, attribute, class or style binding.

Variable interpolation is used to paint data as text in your view. For this we have, for example, an h3 header in which we paint in the view, the data that contains the “currentCustomer” variable from our class.

In our view’s code, this would look like this:

<h3>Current customer: {{ currentCustomer }}</h3>

And in our source we would have the variable loaded with some value like this:

currentCustomer = ‘Maria’;

Property binding, on the other hand, is used to set the value of an HTML property. So we have, for example, an image for which we will set its source.

In our view’s code, this would look like this:

<img alt=”item” [src]=”itemImageUrl”>

And in our source we would have the variable loaded with the image path:

itemImageUrl = ‘../assets/phone.svg’;

This article is currently under development… stay tuned.