One-way and Two-way 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.
- 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.
As shown in about example we can use the binded variable in HTML elements by adding curly brackets like {{Name}}. This method is mostly used when w need to concatenate two values. eg : {{FirstName}} {{Last Name}}.
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.
3. 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.
If we use value variable as shown in the comment or as a property bind it will result in an error. So that we need to use an Attribute bonding with start with attr and followed by a dot and the name of the attribute.
4. 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.
CSS property red will be only applied when student marks are lower than 40. As similar to the Attribute binding, Class binding starts with the keyword class followed by a dot and class name.
5. 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. Let’s discuss more topics regarding Angular in upcoming articles. Until then, HAPPY CODING!.
