Angular Data And Style Binding

Hello friends, today I want us to look into a very interesting and important part of angular application programming. That is on binding.

Binding means defining communication between and angular view (html) and component (In this case typescript code). Look, the data originates from the component most of the time and ends up in the view. Rarely will you hard code data onto your view if you are a serious programmer.

Having known what binding is all about, I will categories them into the following categories for easy of understanding:

Data binding

Style binding and Class binding

Event binding

Data Binding

Data binding is how the data moves from the component to the view and possibly back. A deliberately using “possibly” because data binding can be:

One way or

Two way binding.

For one way data binding, your guess is exactly mine. Data moves from the component to the view and never comes back.

Two way data binding embraces the back and forth. Data moves from the component to the view and from the view to the component when there are changes. Assume you were editing a form for example. You will need to update the model. This is the way to achieve it.

Now, how do we achieve the above?

For one way data binding we use two methods:

String interpolation

Property binding

Look at the following code snippet:

The cycled in blue is string interpolation one-way binding. It is using double curly braces {{}}. In between the braces is a variable. The variable in the component. So whenever this component is loaded, the view references the variables from the component to pick the values. It is like it tells the component “Hey my friend, I have two visitors here. What presents are they carrying?” then the component responds with the values of the variables.

The cycled in maroon color is property binding. In this case am doing a class styling binding which I will talk about shortly. All I want you to understand is that property binding is done to non-strings. And it is done using the square brackets [].

Style and Class Binding

As you can guess, this is used when you want to achieve different styles on the view depending on certain conditions. So that for example, if a boloolean value is true then you apply color red else green.

Back to our code snippet:

Check at what is cycled in red. It is class.headeritems and it is surrounded with property binding braces. This is class binding. It has two parts:

keyword “class”

.headeritems-which is a css class in this case defines in the css file.

So you simply create a class style in your css file or in the component metadata and call it in the component prefixed with the keyword class.

Also, after is an expression which in full is class.headeritems=”applyclass”. The applyclass is a Boolean value in the component which is evaluated to determine whether or not to apply the class style defined.

Event Binding

In this one, we talking of DOM events. For example when a button is clicked or user is typing. The we send this form from the view to the component for any processing required.

Event binding is achieved using the braces (). In this case am calling the method

getUserInput(input: any) {

console.log(input.value);

}

And passing in a template reference. Then picking the value from the template reference and logging it to the console. See snippet below:

Check the cycled in red (click) which is an on click event.

Two-Way binding

Assuming you wanted to view your data as you type in a text field for example. This way you must do two way data binding. Where the changes you are doing in the view must reflect in the component then back to the view. Two way data binding is achieved through the use og ngModel. The directive is surrounded by a pair of squire and round brackets as [(ngModel)]. So this is basically a combination of the property and event binding.