Learn Angular Step by Step – Session 4 : Angular data binding

In the last session we have went through the angular components and create a new component using angular cli. If you have done the practical example which is to make a web app with header and footer components you may have a good understanding about how to make components how to place them etc. In today’s session we are going to cover the basics of data binding in a angular app.

Data binding can be described as communication between html or template file and typescript or the script file. If you need to do some calculation or same assignment condition checking or any logical thing you have to do it inside the script file. But if you want to show it to the users you have to write it in the html file. So is it super important to communicate between these two files.

There may be several ways we need to communicate between these two files.

  1. You may need to pass some value from ts file to html file. This can be done using Property binding. For example display some calculated value from the script.
  2. You may need to pass some value from html to ts file. This can be done using event binding. For example to send a value user entered in a input box for calculation.
  3. You may need to pass the data to typescript file and use it with the html file at the same time. This can be done using two way binding. For example you may need to get a value for the calculation and show the original value also in a separate place in html.

Before we discuss more about these types of data binding methods, take a look at the following image to get the overview of three types of bindings above mentioned.

Now lets learn more about these data binding methods one by one.

  1. Property Binding and string Interpolation

As we discussed this is used to bind properties from ts file (script) to html file. Lets do some example to get more practical experience. Hope you have a working angular app now and in a main app-component or in a component you have have created lets create a new variable. Here I am using the header component we have created in the last session. In the ts file I am creating a new variable “siteName”. I am typing siteName: string; just below the class creation. Look at the following image.

Here siteName is the variable name and the string is the data type. Talking about the data types you can use string, number, boolean, any etc. Since site name is string I am using string here. Then Inside the constructor I will assign a value to siteName. So I am writing this.siteName = “My Sample Site”; Here we are using “this” keyword as we are referring to a variable inside our class.

Then I am saving the file and go to header.html file to output the variable name in our user interface.

So all you need to do in the html file is to mention the variable name using double curly braces. {{ }}. Since our variable is siteName I am using {{siteName}} inside the header html file. This is called string Interpolation. For make it more clear I have include it inside <h1> tags. Here you have to keep in mind that only strings or some thing convertible to string ( eg: number,boolean value) can be output using the curly braces. or else you can use method where a string is returning.

So if I save and run my application I can see “my Sample Site” text in the site.

Cool. So this way you can output your variable values to user. If you want to use variables to handle html property values that can also be done using property binding. For example when you need to enable/disable a button when a condition is true, when you want to change some attributes depending on some conditions etc. Those can also be done using property binding. For example in the above example you can use property binding as [innerHtml]= “siteName” to output the same.

We’ll discuss more about this as we follow along. Now lets go through the next type of data binding.

2. Event Binding

As we described earlier Event binding is used to output some value from html file to ts file. Let’s say we want to pass the event, a button is pressed. For demonstration we will do that example. So I will add a two buttons to header called sign In and Sign Up and we will show the headings sign in and sign up when user pressed the corresponding button. I will do it in the app.component. You can do it in a separate component as well. If you are doing it in a separate component make sure to import and show it in the app component. So now my app.component.html file looks like this.

You can add any styling as you want. But for the moment I will use simple buttons to make it more clear. Now I want to pass the event a button is pressed to the typescript file to change the heading. So here I will change the file to do that change.

Here you can see I have used heading as a string interpolation and add (click) to get the event. SignInButtonPressed and SignUpButtonPressed are two methods which will trigger when user pressed the button. Then we’ll write the script to handle that methods. This is the app.component.ts file.

Here I have added heading as a variable and assigned the value Content as a initial value. Then when button pressed I am changing the value of heading variable. Now you can run the program and see how it behaves when you press the buttons. Also here we can pass the values to the script as well. We will do that kind of examples in the future. Now lets move on to the next type.

3. Two way binding

Lets say you want to output some thing while doing some modification in other element in the html. For example you want to change a value in a input box while typing in another inputbox. Here you can use two way binding. For demonstrate I will add two input boxes to my app.component.html file.

Here you can see there are two input boxes and also a strange word called “ngModel”. This ngModel is a special tag in angular we are using to do two way bindings. You may noticed that in property binding we have used brackets[] and event binding we have used parentheses(). Here since it is two way binding we are using both. “inputValue” is the variable we are using to bind the values. So we have to initiate it in the script file.

So I have initiate it inside the app.component.ts file. Now if I run it and open the browser I can see two input boxes next to each other. Once I start writing on one input box the same will be coping to other input box since we have used two way binding.

So in this session we have discussed on types of data binding. In the next session I will start a new project where we can do with previous knowledge and I will continue that project with the concepts day by day. Then you can gradually build a complete app using angular. So if you have any unclear areas please make a comment. Lets meet again with the next session.

Comment here