An important Angular concept is data binding. It enables us to specify how components and views communicate. Data binding is transmitted back and forth from the view to the component.
Data synchronization between the models and the views is necessary for web development. While views deal with what the user sees, models essentially contain the data values. So, if you're interested in learning how Angular handles this, read this post on Angular Data Binding.
The subjects that are covered here are listed below:
- What is Data Binding?
- Types of Data Binding in Angular
- One-way Data Binding
- Interpolation
- Property Binding
- Event Binding
- Two-way Data Binding
What is Data Binding?
Angular's primary concept of data binding makes it simple to design interactive apps without worrying about pushing and pulling data because it defines communication between a component and the DOM.
Types of Data Binding in Angular
Both one-way and two-way data binding are supported by Angular. One-way data binding is a straightforward sort of data binding that enables you to control the views via the models. This suggests that editing the Typescript code will update the accompanying HTML. One-way data binding in Angular is accomplished by:
- Interpolation or String Interpolation
- Property binding
- Event binding
On the other side, two-way data binding enables data synchronization so that views can be updated using models and models can be updated using views. As a result, a component class and its template will be able to communicate information throughout your application.
One-way Data Binding
Data only moves in one direction, from the models to the views, in one-way data binding. One-way data binding in Angular can take one of three different forms: interpolation, property binding, or event binding.
Interpolation
{{ value }}: Adds the value of a property from the component
<li>Name: {{ user.name }}</li>
<li>Address: {{ user.address }}</li>Property binding
[property]="value": The component passes the value to the designated property or straightforward HTML attribute.
<input type="email" [value]="user.email">Event binding
(event)=?function?: Call the provided method in the component whenever a specific DOM event occurs (such as a click, change, or keyup).
<button (click)="logout()"></button>Two-way Data Binding
Angular supports two-way data binding, which enables data sharing between components and templates as well as the other way around. This ensures that your application's models and views are consistently synchronised. Setting the element property and listening for element change events are two actions that two-way data binding will carry out.
Two-way binding uses the syntax [()]. As you can see, it combines the event binding syntax [] with the property binding syntax []. ( ). This syntax resembles "Banana in a Box," according to Angular.
<label ><b>Name:</b>
<input [(ngModel)]="course.name" placeholder="name"/>
</label>Executing this code will show you that alterations to either the models or the views will affect the relevant views and models.
