Angular: One-way and Two-way data binding with example

Angular: One-way and Two-way data binding with example

01 April 2021

What is Data binding?

Data binding defines communication between component and view. There are two types of Data binding exist in Angular: One-way and Two-way data binding.

One-way Data Binding

In this binding, data binds from component to view and vice versa. It is unidirectional binding.

From component to View data binding can be achieved by following ways:

  1. Interpolation Binding
  2. Property Binding
  3. Attribute Binding
  4. Class Binding
  5. Style Binding

Interpolation Binding:

In this we are using binding expression {{}} in the project.

Angular_One-way_and_Two-way_data_binding_with_example_01

Property Binding:

In this we are setting the property of the view element. We can change property value from component.

Angular_One-way_and_Two-way_data_binding_with_example_02

Attribute Binding:

It is used to set the attribute property of the view element.

Angular_One-way_and_Two-way_data_binding_with_example_03

Class Binding:

It is used to set the class property of the view element.

Angular_One-way_and_Two-way_data_binding_with_example_04

Style Binding:

It is used to set the style of the view element.

Angular_One-way_and_Two-way_data_binding_with_example_05

Form View to Component data binding can be achieved by using event:

Here we can use the click event of the element to make communication from view to component. Example button click execute function to display alert message.

Angular_One-way_and_Two-way_data_binding_with_example_06

Two-way Data Binding

Two-way data bing helps to exchange data from component to view and view to component. Using (ngMode) we can achieve two-way data binding in Angular. Before using (ngModel) you need to import FormsModule from @angular/forms in app.module.ts file otherwise gives the error “Can’t bind to ‘ngModel’ since it is not a known property of ‘input’”.

Angular_One-way_and_Two-way_data_binding_with_example_07

Request a quote