This content originally appeared on DEV Community and was authored by haimantika mitra
Hi everyone 👋, welcome to the second blog of the beginner series. Thank you for the amazing response to the first blog. 🙏🏽
We talked about Components in our last blog, today we will be covering basics on Data Binding.
What Is Data Binding?
Data Binding is the flow of data between Component Class and Component Template. Data binding is used to specify things such as the source of an image, the state of a button, or data for a particular user.
There are three categories of data-binding, that depends on the direction of data flow:
- From source to view
- From view to source
- In a two-way sequence of view to source to view
Data Binding Types
Data Binding can be done in three ways:
- Interpolation - It is one-way binding, from data source to view target. It goes by the syntax
{{expressionname}}. Using interpolation, data is passed from the component class to the template. - Property binding - Angular Property Binding is used to set the property of HTML Elements with the properties of the component class. It goes by the syntax
[propertyname]. - Event binding - Event binding helps in capturing events such as keystrokes, mouse movements, clicks, and touches and then provide a response to it. It goes by the syntax
(eventname).
What Is Two-way Binding?
Two-way binding helps in listening to events and update values simultaneously between parent and child components. In Angular, two-way binding can be achieved by combining Property-Binding and Event-Binding. It goes by the syntax [()], derived from the [] of Property-Binding and () of Event-Binding. Two-way binding in Angular can be done using ngModel.
Example of using ngModel for two-way binding:
export class AppComponent {
eg = ‘Hello’;
}
<input type=”text” [(ngModel)]=’eg’ />
<h2>{{name}}</h2>
Ending Notes
That is all about Data Binding, thank you for reading till the end.
Most of my learning credit goes to:
- Angular docs
- Books by Dhananjay Kumar and Christoffer Noring
What do you want me to cover in the next article? Let me know in the comments below, or drop a DM to @HaimantikaM.
This content originally appeared on DEV Community and was authored by haimantika mitra
haimantika mitra | Sciencx (2022-06-29T14:28:45+00:00) Getting Started With Angular #2. Retrieved from https://www.scien.cx/2022/06/29/getting-started-with-angular-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.