Angular Basics -Data Binding

Nipuni Kodithuwakku
Jun 16 · 5 min read
Image for post
Image for post

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
Image for post
Image for post
Binding types and their categories

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

Image for post
Image for post
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.

Image for post
Image for post
The typeScript code
Image for post
Image for post
The HTML code
Image for post
Image for post
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.

Image for post
Image for post
The typeScript code
Image for post
Image for post
The HTML code
Image for post
Image for post
output of above code

3.Attribute binding

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”).

Image for post
Image for post

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”)

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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🤗

Frontend Weekly

It's really hard to keep up with all the front-end…

Nipuni Kodithuwakku

Written by

Software Engineering | Level 3 Undergraduate | Tech enthusiast | Developer,

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Nipuni Kodithuwakku

Written by

Software Engineering | Level 3 Undergraduate | Tech enthusiast | Developer,

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store