Binding in Angular

Data-binding means communication between the TypeScript code and template. Using Data Binding, the user can able to manipulate the elements. Therefore, whenever some variable has been changed, that particular change must be reflected in the Document Object Model

Data-binding can be either one-way or two-way. Angular provides various types of data binding -

1.String Interpolation

2.Property Binding

3.Event Binding

4.Two-way binding

String Interpolation

String Interpolation is a one-way data-binding which is used to output the data from a TypeScript code to HTML template (view). It uses the template expression in double curly braces{{}} to display the data from the component to the view.

app.component.ts

app.component.html

<h3><title name: {{title}}</h3>

in the above example, the output will be 
title name: String  Interpolation Data Binding

Property Binding

Property binding is also a one-way data binding, where we bind a property of a DOM element to a field which is a property we define in our component typescript code. Behind the scene, Angular converts string interpolation into property binding.

For Example – <img [src]=”imgUrl” />

However, we can use string interpolation here like <img src=”{{ imgUrl }}” /> , but property binding is always a lot cleaner and shorter syntax to bind image source.

Event Binding

Angular provides us with other types of binding, i.e., event binding, which is used to handle the events raised from the DOM like button click, mouse move etc. Let’s understand this with the help of an example –

Suppose we have a button in the HTML template and we want to handle the click event of this button. To implement event binding, we will bind click event of a button with a method of the component.

app.component.ts

When a user clicks on this button, the button click event will fire and the onClick method will be called, which will log a message in the console.

Two-Way Data Binding

Angular provides a very nice feature; i.e., two-way data binding. As of now, we have seen how to bind component data to view using one-way bindings. That means any change in the template(view) will not be reflected in the component typescript code.

Now, two-way binding has a feature to update data from component to view and vice-versa.

Syntax - For two-way data binding, we combine property binding and event binding both.

<input [(ngModel)]="username">

<p>Hello {{username}}!</p>