Angular: Data Binding

Imagine that you were building a web app and you decided that you are going to hard-code all the text that should be displayed by your app. You might think OK, that's tedious and boring but doable. Now imagine that your web application receives data from some back-end service and has to display that data to the users, hard-coding goes flying out the window, enter data binding. Data binding allows us to tie some data from within the application to elements defined in the templates. Remember we spoke in detail about templates  and components in our previous hands-on tutorial.

So far in our mkhaya demo project we created two components HomeComponent and MessagesComponent and used them to demonstrate how to add components inside other components. Now lets assume we want to remove the default "messages works!" text and display actual messages in our MessagesComponent, how would we go about that? Well, first we need to declare a public variable in messages.component.ts that we will supply our messages to and then bind to it from the template. Lets name our variable messages.

public messages: string

Then we use the ngOnInit call back method to set the value of our messages variable.

If we serve up our app after making these changes it will not break, meaning there is no error in the code but we will not see any difference on the page. That's because the actual data binding hasn't happened. Lets bind to our messages variable. In messages.component.html remove the default text between the <p> tags and add {{messages}} such that the template file reads as follows:

<p>{{messages}}</p>

The double curly braces are Angular's directive for one way data binding. After we save the changes we can see that instead of reading "messages works!" it now reads "This is our first message" which is what we declared inside our variable. Great, now we can take data from our app to our users but what if we want to take data into the app?

Enter two way data binding. Two way data binding simply means that changes to the text of the element that is bound to the variable result in the change of the value in the variable and vise versa. To demonstrate this, lets put a text input field in the messages template and then bind it to the messages variable. Two way binding requires the we have the FormsModule imported into our project and as such lets open app.module.ts and add the import line at the top of the file.

import { FormsModule } from '@angular/forms'

In the imports array in app.module.ts we should add FormsModule so that it becomes available across the application. Now we can go into the messages.component.html template file and add the text input field.

<input type="text" [(ngModel)]="messages">

After saving we see an input field that has the text "This is our first message" in it. Editing in this input field produces changes in the messages variable which in turn changes the text in the <p> tags.

We can bind to events that buttons and other elements emit. For example, lets add a button and bind to its click event to increment some variable in our component. First lets create a variable called counter and initialize it to zero. Then we define a function that responds to a click event by adding 1 to the counter variable.

Then we define a button and bind its click event onto the addOne() method.

<br><input type="button" (click)="addOne()">

And lastly, we need a place to see our counter value so we add

<p>Counter value = {{counter}}<p>

Clicking Add One adds one to the counter value. With this we can conclude our tutorial but before that lets have a quick recap of what we covered. We looked at one-way data binding, two-way data binding, and event binding and how we can use these techniques to achieve user interaction. Thank you for reading and see you in the next tutorial. Cheers.