In this tutorial, we will take a look at data binding in Angular 5 application. Data and User Interface (UI) both are the fundamentals of any application. And it’s very crucial to find an efficient way to wire them up together. But angular provide us a great support to wire them up together.
Previous Tutorials of Angular 5 Series
What will you learn in this Angular 5 tutorial?
- What is Data binding in Angular 5?
- Interpolation in Angular 5.
- Property Binding in Angular 5.
- Event Binding in Angular 5.
- Two way binding in Angular 5.
Let’s start with Data binding.
What is Data Binding in Angular 5?
The connection between UI (User Interface) and Data in your application is called data binding. Data binding means, when you create any changes in your data part, then the User Interface part which is bound to that data will also change. Data binding can be a one way or a two way.
There are following types of bindings are supported by Angular:
- Interpolation
- Property Binding
- Event binding
- Two-way binding
Note: – I will not create a new project in this tutorial. I will use that project which was created in one of the previous tutorials. If you don’t know how to install or create a new project, then click here.
Interpolation in Angular 5.
We use curly braces for data binding like in this way {{ }}. This process is called interpolation. Now, let’s see how does it work. As you have seen the project is also created. So, now let me to create simple examples of interpolation.
Go to folder structure => open home folder => and then open “home.component.ts” file. Copy the below code and then paste it into the HomeComponent class.
statement = ” This is tutorial about interpolation in angular 5″;
Now, open home.component.html file and paste this below line into the HTML file where ever you want.
<h2>{{statement}}</h2>
Now, run your project with “ng serve” command, and then you will see the below statement in your output.
“This is tutorial about interpolation in angular 5”
Take another example.
In this example, we will create a dropdown in Angular 5. Let’s see how. Open home.component.ts file as you see in below.
Line # 13: as you see we have created an array of leap years.
Now, open home.component.html and write the code for dropdown as you see below code.
Line # 3: in this line, we have just created the simple select tag.
Line # 4: this is the option tag for select tag. And I also use for loop in this tag like this *ngFor= “let ly of leapYears”. This for loop is used to iterate over the “leapYears’” array.
Now, run your project using “ng serve”, and you will see the output as below in screenshot.
Property Binding in Angular 5
Property binding is used to bind values to the DOM properties of HTML elements. It is a one-way binding technique like the interpolation.
Let’s see, suppose we have a button in our application and we want to control the value property of button using property binding.
Open home.component.ts file as you see in below we have added a “btnText” Property.
Line # 15: we have added a line for button value property.
Now, open home.component.html file and write the HTML for the button as you see below code.
Line # 11: we have added an input button tag and see the value property of this input tag. Whenever you create a property binding, just use the property just inside the brackets []. This value property is bind with btnText which we have created in home.component.ts file.
Now, run your project and then you will see the out as you see in below.
Event Binding in Angular 5
When a user clicks on a button in your application, it generates an event. Mouse hover is also the example of generating an event. And these events need to be handled to perform some kind of action. Let’s see how we do in Angular 5 application.
Open home.component.ts file and see the function we have created in HomeComponent class.
Line # 16: we have just created a function. Whenever this function will call, a popup will be open in the browser with the statement “Items are added”.
Now, open home.component.html file and add the click event property in input button tag as you see below.
Line # 12: we have added click event property to call the “MyClickEvent” function.
Let’s run your application and when you click on button then the control will come to MyClickEvent() function and then this function will open the dialog box with the statement “Items are added” as you see below screenshot.
Two-way binding in Angular 5.
We will create an input text field to both retrieve and set its value from the component class. We can use ngModel to create two-way data binding. But first-of-all, we need to import the forms module. Let’s see how to import forms module.
Just open app.module.ts file and put this below line at the top.
import { FormsModule } from ‘@angular/forms’;
As you see the FormsModule import form angular forms library and then copy the “FormsModule” and add it into the imports property as you see below.
As you see above the formsModule imported in line # 4 and then the name is added in line # 15.
Now, open home.component.ts file and add the line which we have added in line # 22 to create two-way data binding. This twoWayText has the by default value “this is the two-way data binding.”
Now, open home.component.html and add the below code in your file.
Line # 2: we have added ngModel at the end of this input tag. This syntax to use ngModel is “[(ngModel)]=”twoWayText””. The twoWayText is the string which we have created in home.component.ts file.
Line # 3: this is simple span tag. Whenever you change the input text field value, the span value will also be changed.
Now, run your project and you will see the output as you see in below screenshot.
Leave a Reply