Data Binding in Angular

Angular data binding is an important topic when it comes to passing data between components to DOM. In this article, I’m going to discuss one-way and two-way data binding.

One-Way Data Binding

This is a unidirectional data binding method. If we use one-way data binding we can only bind data from component to view or from view to the component. There are many different ways that we can use one-way data binding in our Angular application.

1. Interpolation Binding
   Interpolation is a very common method that we use to bind data in Angular and this refers to binding values into UI elements.

2. Property Binding.
   This is another widely used approach to bind data and with this method, we can bind values from components into the DOM properties of the HTML elements.

If we use Interpolation in such situations button will be always disabled neglecting the value of the variable.

1. Attribute Binding
   Attribute binding is used to bind an attribute property of a view element. Let's take a scenario that we need to merge some columns in a table using a colspan attribute.

2. Class Binding
   Syntax of class binding is very similar to Attribute Binding and this method is used to set a class property of a view element. With the use of this binding method, we can add CSS classes conditionally to an element, creating dynamically styled elements.

3. Style Binding
   This method is also very similar to the previous two methods and we can set Style Binding to set inline css styles.

Two-Way Data Binding

Two-way data binding is establishing a bi-directional connection between View and component allowing users to exchange data in both ways. Two-way data binding can be easily achieved by using (ngModel).

Please make sure to import FormsModule from @angular/forms to app.component.ts file if you are using (ngModel).
Hope you enjoyed this article.