Data Binding in Angular

Data Binding is regarded as the most vital feature in Angular as it defines the communication between Angular Component and View.

Some examples of Data binding are: Storing input value in a variable, styling html tags,… etc.

Based on the flow of data, Data Binding can classified into four types.

The different forms of Data Binding are:

  1. Property Binding [ ]
  2. Interpolation {{ }}
  3. Event Binding ( )
  4. Two way binding [( )]

Property Binding in Angular:

The Property Binding, as the name suggests, is used to bind Property of the view element to the value of template expression.

In Property binding , Square brackets [ ] are used and the binding target is placed in the said brackets where as the value assigned to it is enclosed in quotes.

[] = “”;

data binding in angular property binding

In the above example, I am binding the ‘hidden’ property in [] and assigned a value ‘false’ to it. As it has set to false that div will be visible, if you set the value as True, then you won’t see the div in output.

You can even call ‘function’ as value to the property. Then return value of the ‘function’ will be assigned to the property.

Interpolation in Angular:

Interpolation is one way data binding which provides the data binding from ‘component’ to ‘view’. In other words it binds data from ‘Component’ class to the ‘template’.

You can see I have added a couple of properties “heading” and “mycaptain” in the ‘component.ts’ file.

angular interpolation html component

This is your ‘component.html’, where you have seen them wrapped inside the {{}}. In the output, it displays the values assigned to those properties in ‘component.ts’ file.

Output:

Captain

My fav Captain is : MSD

Even though , both Property Binding and Interpolation are one-way bindings, there is a significant difference between them.

If it is, Interpolation – it requires ‘expression’ to return a string. Where as property binding helps to add the data value which isn’t a string to the property of an element.

Event Binding:

As we have discussed earlier both the interpolation and property bindings are one way binding from ‘component’ to ‘view’. But in contrast to them an Event binding is used to perform an action in the ‘component’ (may be executing a method) when user-raise an event – like ‘click on’ button.

The parentheses ‘()’ are used for an Event binding and the name of the event is enclosed in parenthesis which is then assigned to the statement which is mostly the method in the component class.

Angular event binding html component

In this ‘.html component’, I am binding the click event using (), and called a ‘ClickFun’. When someone clicks on the button that function will be loaded. Function block is shown in the below image which is ‘.ts component’ where I have written a simple function to display the alert.

angular event binding ts component

Two-way data binding:

Two way data binding helps to auto reflect the changes in ‘view’ with respect to the modification in ‘component’ and vice versa.

Two way binding is used mainly in data entry forms whenever the user makes any changes to the data in view, those changes needs to be updated in our model in the component and in the same way, change of data in the component also gets updated in a view.

Angular uses combination of property binding and event binding by using ngModel directive.

‘ngModel’ directive is not a part of angular core library. It is defined in the ‘FormsModule’ library. You need to import ‘FormsModule’ into our main module that is ‘app.module.ts’ before you start using ‘ngModule’.

two way data binding in angular

Check the above example to understand how ngModule is used to implement two-way data binding.

In the above screenshot, you can observe that I have added ngmodule on the input field and assigned ‘value’ which holds the data entered by the user in the input field. To display the data I wrapped value inside {{}} in the

tag below.

Output:

Entered name is: “Data user enters in input field”.

If you are a beginner, do check out my article on Angular Tutorial

Also, check my article on Services in Angular  to understand the real time usage of a Angular Service.

Summary
Data Binding in Angular - Property, Interpolation, Event and Two-way
Article Name
Data Binding in Angular - Property, Interpolation, Event and Two-way
Description
Data Binding is regarded as the most vital feature in Angular as it defines the communication between Angular Component and View.
Author
Publisher Name
Madhan Tutorials
Publisher Logo

4 comments on “Data Binding in Angular

Leave a Reply

Your email address will not be published. Required fields are marked *