Data Bindings In Angular

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.

Comments

[Pierre Bouillon]

Hey, nice article, thanks for sharing!

Just some tips about the DEV editor, you can create series to group all articles related to the same subject, it could help you to keep your article related to Angular2 tutorials together!

On a side note, you may also want to highlight your TypeScript code with Markdown, you just have to specify the language when writing it, like this:

and it will be displayed as:

export class AppComponent {
  eg = ‘Hello’;
}
<input type=”text” [(ngModel)]=’eg’ />
<h2>{{name}}</h2>

[haimantika mitra]

Oh how nice! Thanks for sharing with me the series thing (I was looking for something like this).

Ah yes! I recently learnt about the language trick! Doing it right away!