Being the core concept of Angular 8, data binding makes it easy to define interactive applications without worrying about pushing and pulling data, by defining the communication between a component and the DOM. The data binding can be understood as a communication between the typescript code of a component and the template that the user views. It thus links the data to the view layer.
There are two types of Angular Data Binding. These are:
One-way Data Binding:
Being a simple and a single way of communication, the HTML template is changed in One way Data Binding when changes are made in TypeScript code.
Or
The value of the Model is used in the View (HTML page) in One Way Data Binding. The Model, however, can’t be updated from the View. Example: Angular Interpolation / String Interpolation, Property Binding, and Event Binding.
Two-way Databinding:
The automatic synchronization of data happens in Two Way Data Binding between the Model and the View. It means that changes made in the Model will be reflected in the View and the changes made in View will be reflected in Model. To secure that the HTML template and the TypeScript code are updated at each time, the changes made will be reflected in both components immediately and automatically.
Four types of data binding are different on the way of data flowing. These are:
- String Interpolation
- Property Binding
- Event Binding
- Two-way binding
String interpolation:
Being a one-way data-binding technique String Interpolation is used to output the data from a TypeScript code to an HTML template (view). To display the data from the component to the view, the template expressions are used by the String Interpolation in double curly braces.
Example:
{{ data }} |
The value of a property is added by the String interpolation from the component:
Syntax:
<li>Name: {{ user.name }}</li> <li>Email: {{ user.email }}</li> |
Property Binding:
Just like String Interpolation, Property Binding is also a one-way data-binding technique. It, however, binds a property of a DOM element to a field which is a defined property in the component TypeScript code.
Example:
{{ data }} |
Syntax:
<input type="email" [value]="user.email"> |
Event Binding:
To handle the events raised from the DOM like button click, mouse movement, etc event binding is used in Angular 8. The specified method is called by event binding in the component when the DOM event happens (eg. click, change, keyup).
Example:
<button (click)="cookBacon()"></button> |
Explanation:
The cookBacon() method in this example is called from the component when the button is clicked.
Two-way Data Binding:
Any change in the template (view) in one-way data binding was not reflected in the component. The two-way binding, however, facilitates to update data from component to view and from view to component. Both the property binding and event binding are combined in two-way data binding.
Syntax:
[(ngModel)] = "[property of your component]" |
The ngModel directive needs to be enabled for two-way data binding. The FormsModule needs to be added in imports[] array in the AppModule, because the ngModel directive depends upon FormsModule in angular/forms package.