Click here to Skip to main content
15,867,594 members
Articles / Programming Languages / Typescript

Angular2 - Binding

Rate me:
Please Sign up or sign in to vote.
5.00/5 (8 votes)
26 Jan 2017Apache3 min read 17K   5   14
Binding in Angular2

What is Binding?

Data binding is a mechanism that was used by Angular2 for showing data on the UI and receiving input from user. So the logic of component (class in ts file) can interact with the UI (HTML/ template file) easier.

Ok, Can You Show Me How to Display Data on UI?

Look at users.html file, there is a loop statement, looping through the collection of data and printing it out to the browser:

HTML
<tr *ngFor="let user of users">
	<th scope="row">{{user.id}}</th>
	<td>{{user.firstName}}</td>
	<td>{{user.lastName}}</td>
	<td>{{user.userName}}</td>
	<td>
		<a title=""><i class="fa fa-edit"></i></a>
	</td>
</tr>

In this code, we use {{user.userName}} for showing value of userName to UI or one-way binding.

How Many Types of Data Binding Can We Use in Angular2?

Mostly 3 types were used. They are:

  • One way binding: For showing data on UI only.
  • Two-way binding: This is for showing data on UI and receiving back modified data from UI.
  • Event binding

Can You Explain More About One-way Binding?

In one-way binding, we mostly use this for displaying data to the UI.

We use "{{name_of_variable}}" pattern for this case.

As a sample above, in users.html file, we show the firstName of user by "{{user.firstName}}" pattern.

Image 1

Is There Any Other Way For Showing Data to UI (One-way Binding)?

Beside using "{{}}", we can use "[name of property]='value'" pattern.

In the sample below, I change from:

HTML
<td>{{user.firstName}}</td>

to:

HTML
<td [innerText]="user.firstName"></td>

And the output in the browser is the same:

Image 2

Look closer at the generated HTML, we have:

Image 3

We see that the generated HTML for "First Name" is not the same with HTML for "User Name" (and others).

For some cases, we can use this and update other attributes of generated element as:

HTML
<td [style.backgroundColor]="user.color" [innerText]="user.firstName"></td>

This will change the UI to:

Image 4

We Have 2 Ways for Using One-way Binding, When Should I Use the First or Second?

Each type of binding has it own purpose.

For the first type of binding, we should use for those cases:

HTML
<img src="http://tranthanhtu.vn{{user.avatar}}" />

We can also do this using the second type of binding. But it is more complex.

For the second type of binding, we should use for those cases:

HTML
<td [style.backgroundColor]="user.color"></td>

For those cases, we cannot do it by using the first.

What About Two-way Binding?

We use two-way binding for displaying data on UI and receive the user input.

As sample below, we will display the summary of the selected user. First name and last name of selected user can be edited. Those changes will be updated immediately.

In users.html, add this HTML below the "edit" icon:

HTML
<a title="" (click)="onPreviewClicked(user)">
<i class="fa fa-eye-slash"></i></a>

In Users class (in users.ts), we have:

JavaScript
export class Users {
    public currentSelected: any = null;
    public onPreviewClicked(user: any) {
        this.currentSelected = user;
    }
}

We also add this HTML below the current table in users.html:

HTML
<div *ngIf="currentSelected">
	<h3>Summary of {{currentSelected.firstName}}</h3>
	<form class="form-horizontal form-label-left">
		<div class="form-group">
			<label>First Name</label>
			<input class="form-control" 
			[(ngModel)]="currentSelected.firstName" name="first" />
		</div>
		<div class="form-group">
			<label>Last Name</label>
			<input class="form-control" 
			[(ngModel)]="currentSelected.lastName" name="last" />
		</div>
	</form>
</div>

When you click on the "Preview" icon. "First name" and "Last name" of selected user will be displayed:

Image 5

Your change will be updated automatically:

Image 6

In summary, we use [(ngModel)]="currentSelected.firstName" for two-way binding data between UI and logic of component.

How About Event Binding?

In the above sample, we bind (click) event to "onPreviewClicked" method in component.

We use this format (click)="onPreviewClicked(user)" for binding event as in:

HTML
<a title="" (click)="onPreviewClicked(user)">
<i class="fa fa-eye-slash"></i></a>

Ok, I Understand, Can You Help Me Summarize Binding in Angular?

We have 3 types of binding:

  1. One-way binding: for showing data to UI
  2. Two--way binding: for showing data to UI and input from user
  3. Event binding: Use this for binding specified event, such as: (click), ....

Thank for reading.

Note: Please like and share with your friends if you think this is a useful article, I would really appreciate it.

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0


Written By
Architect
Vietnam Vietnam
I have more than 8 years in web development for multiple types of applications (ERP, Education System, ...).
I usually organize training/ coaching on specified topic (such as: RESTful/ WebApi, Angular2, BEM, LESS, SASS, EF, NodeJs ....). Please contact me on Skype (tranthanhtu83) or email (contact@tranthanhtu.vn) if need.
For more information about me, Please visit http://www.tranthanhtu.vn/page/about-me

Comments and Discussions

 
GeneralMy vote of 5 Pin
Khaled Taleb19-Sep-17 4:15
Khaled Taleb19-Sep-17 4:15 
AnswerRe: My vote of 5 Pin
tranthanhtu.vn21-Sep-17 0:32
professionaltranthanhtu.vn21-Sep-17 0:32 
QuestionLearning AngularJS 1.5 would be useful now? Pin
Member 1327399722-Jun-17 5:51
Member 1327399722-Jun-17 5:51 
AnswerRe: Learning AngularJS 1.5 would be useful now? Pin
tranthanhtu.vn22-Jun-17 22:12
professionaltranthanhtu.vn22-Jun-17 22:12 
QuestionRequest Pin
Member 1168830929-Jan-17 19:22
Member 1168830929-Jan-17 19:22 
can you provide the full solution......
AnswerRe: Request Pin
tranthanhtu.vn30-Jan-17 4:42
professionaltranthanhtu.vn30-Jan-17 4:42 
QuestionThank you! Pin
Member 1246662922-Jan-17 7:15
Member 1246662922-Jan-17 7:15 
AnswerRe: Thank you! Pin
tranthanhtu.vn22-Jan-17 15:58
professionaltranthanhtu.vn22-Jan-17 15:58 
GeneralMy vote of 5 Pin
MagalieEdel21-Jan-17 21:48
MagalieEdel21-Jan-17 21:48 
AnswerRe: My vote of 5 Pin
tranthanhtu.vn22-Jan-17 16:01
professionaltranthanhtu.vn22-Jan-17 16:01 
QuestionMessage Closed Pin
19-Jan-17 20:45
Member 1292169419-Jan-17 20:45 
AnswerRe: Data binding in Angular 2 versus Angular 1 Pin
tranthanhtu.vn19-Jan-17 20:50
professionaltranthanhtu.vn19-Jan-17 20:50 
GeneralRe: Data binding in Angular 2 versus Angular 1 Pin
Member 1292169419-Jan-17 20:56
Member 1292169419-Jan-17 20:56 
AnswerRe: Data binding in Angular 2 versus Angular 1 Pin
tranthanhtu.vn19-Jan-17 21:00
professionaltranthanhtu.vn19-Jan-17 21:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.