Angular Basics -Data Binding

Welcome to my second post on Angular. It is all about angular “Data Binding”.Now lets see what is “Data Binding”? We could basically translate data binding with communication.In advanced, It means the communication between the typeScript code (business logic) of your component and the template(HTML).It describes the flow of data from component to view.The template or view is the only thing that the user can see.

There should be a way to communicate between typeScript code and the template.Data binding is responsible for this communication.So that is where data binding comes in to the picture.

There are many kinds of Data binding .Binding types can be divided into three categories distinguished by the direction of the data flow.

1. From the source to view
2. From view to source
3. Two way sequence-view to source ,source to view

Binding types and their categories

Let’s try to understand one-way data binding by referring following example.

one-way data binding example

1. user clicks on the button.The (click) event wired to“increment” method.
2. The component receives the click event and fires the increment method,which updates the counter.
3. The counter variable is updated and then sends that updated value to the view.
4. The view receives the updated counter and then updates the display.

With one-way data binding ,data flows in one direction.Imagine a ceiling fan.Even though the blades are rotating in a circular way,the movement is still only going in one direction.

Now is the time to look at one-way data binding types.

1. Interpolation

Interpolation refers to embedding expressions into marked up text. By default, interpolation uses as its delimiter the double curly braces, {{ }}

The following code snippets make an interpolation.

The typeScript code

The HTML code

output of above code

More generally, the text between the braces is a template expression that Angular first evaluates and then converts to a string.

2.Property binding

Allows Angular to directly access the elements property in the html. This is a deeper access.

The typeScript code

The HTML code

output of above code

3.Attribute binding

Get Nipuni Kodithuwakku’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Attribute binding is used to bind an attribute property of a view element.

Attribute binding is mainly useful where we don’t have any property view with respect to an HTML element attribute.

Attribute binding syntax seems to be same with property binding syntax.But instead of an element property between brackets, start with the prefix attr, followed by a dot ( . ), and the name of the attribute.

4. Class binding

class binding is used to set a class property of a view element.we can add and remove the class names from and element’s class attribute with class binding.

To create a single class binding, start with the prefix class followed by a dot (.) and the name of the CSS class (for example, [class.myClass]=”isTrue”).

5.Style binding

Style binding is used to set a style of a view element.We can set inline styles with style binding.

To create a single style binding, start with the prefix style followed by a dot (.) and the name of the CSS style property (for example, [style.width]="width”)

Event Binding

Imagine, you want to change some data or respond to user events.How are you going to do that? That’s where Angular Event Binding comes into play.

Browser based events in Angular are typically tied to methods within their corresponding components.Here is an example of a button that triggers an alert.

Here we have inserted a click handler on a button that fires whenever a click event occurs.This triggers “saySomething()” method in the component.In Angular the parentheses around an event handler with in html tag signify what we call “event binding”.In this instance “click” is bound with the parentheses to be (click),which binds that event to the method passed in the quotes,which is “saySomething()”.

Two-way binding

Two-way data binding is when the flow of data between view and component goes both ways.There is a central “model” or variable container.A model is a container that holds a variable’s value.

The [()] construct in Angular enables two way data binding.sometime it is called “banana in a box”.This is possible with Angular “ngModel”. ngModel allows you to type in a field and watch the value of that variable be updated instantly as you type.

ngModel is not in by default in a project.In order to use that you must import forms module into your app.module.ts file.

you would import it like above.

That is the end of our long journey.Hope you get something on this .I wish to meet you all soon with a new article.Until then,

Stay safe- code happily🤗