When I was first learning Angular the term “data binding” was thrown around all over the place.

It was easy enough to understand that data binding coordinated the communication between a component class and the template that its associated with, but to me seemed like a blanket term for a handful of different types of binding, which I wasn't too keen on.

I then found out there was 4 different types of Data Binding in Angular:

Interpolation Binding

Property Binding

Event Binding

Two-Way Binding

Interpolation Binding

Interpolation Binding is more than likely the first type of binding people will come across. You use Interpolation Binding to take expressions and change them into text which can be used within HTML element tags and attribute values. All you have to do is place the expression in the double-curly braces as shown here.

<p>The person's name is {{person.name}}.</p>

So say the Name Property has a value of Ashlea, this would evaluate to…

The person's name is Ashlea.

The text that is placed between the double curly braces is usually a Property on the Component associated with the Template. So what happens is Angular looks at the Component, finds the Property, gets the value and replaces the expression in the double-curly braces with a stringified version of that value.

Alternatively, we can place a Template Expression inside the double-curly braces as shown here.

<p>4 + 4 = {{4+4}}</p>

Would evaluate to…

4 + 4 = 8

Property Binding

Property Binding allows us to set the value of a property on an HTML element to the value of a template expression. Here I’m setting the src value on an image element to the imageUrl attribute on a product object and then setting the title value from the same product object.

<img [src]='product.imageUrl' [title]='product.productName'/>

Property Binding can also be performed using Interpolation Binding.

Event Binding

Event Binding allows our component to listen to events triggered by user actions in the view. The event is enclosed in parenthesis followed by the method that needs to be called when that event is triggered. Here I’m using the click event on a Button but it could be any of the common Global Event Handlers.

<button (click)='updateProduct()'>

Update

</button>

When the button is clicked the updateProduct method is called on the Component and it does its thing.

Two-Way Binding

Two way binding is where the value of a Property on the Component is displayed in say an input element and the change to the element updates the property on the Component. Here I’ve defined a simple text box that is bound to a property on my Component called firstName using the ngModel directive.

<input type="text" [(ngModel)]='firstName' />

The square brackets indicate Property Binding and the parenthesis indicate Event Binding to send a notification of the user entered data back to the property. This is the code in the Component.

export class PersonComponent {

firstName: string = 'Danny';

}

One last thing you need to do is import the FormsModule into the Module that our Component lives within.

imports: [ BrowserModule, FormsModule, HttpModule]

If you haven't imported the FormsModule, the following error or similar will be visible in the Browsers Console, “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’”.

If anyone's got any questions or anything they want to go over, hit me up on Twitter!

Cheers,

Dan

https://twitter.com/danieljameskay