TU Tran

Technologies should serve for business purpose.

NAVIGATION - SEARCH

Angular2 - Binding

What is binding?

Data binding is mechanism was used by Angular2 for showing data on the UI and receive 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 print it out to the browser:

<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 we can use in Angular2?

Mostly 3 types were used most. they are:

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

Can you explain me 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 sample above, in users.html file, we show the firstName of user by "{{user.firstName}}" pattern.

Is there any other way for showing data to UI (one-way binding)?

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

In sample below, I change from:

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

to:

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

And the output in browser is the same:

Look loser at generated html, we have:

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

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

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

This will change the UI to:

We have 2 ways for using one-way binding, when should I use the first or second?

Each type of binding has it owns purpose.

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

<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:

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

For those cases,  we can not 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 selected user. First name and Last name of selected user can be edited. Those change will be updated immediately.

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

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

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

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

We also add this html below current table in users.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 click on the "Prerview" icon. "First name" and "Last name" of selected user will be displayed:

Your change will be updated automatically:

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

How about event binding?

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

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

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

Ok, I understand, can you help me summary binding in Angular?

We have 3 types of binding:

One-way binding: for showing data to UI.

Two--way binding: for showing data to UI and input from user

Event binding: Use this for binding specified event, such as: (click), ....

Where can I find more articles in Angular2 series?

For learning Angular2, I think you should follow the list of articles as below (click on link to see detail page):

  • Overview: Introduce about Angular2
  • Routing: Understand how Angular2 navigate between pages/ components
  • Component: Learn about components/ pages in Angular2.
  • Binding: Learn how Angular2 show data on UI and receive input data from user.
  • Directive: Learn how to create re-usable component/ control that can be re-used across the application.
  • Integrate together: using what we learn about Angular for building the sample demo. 
  • Append "angular 2" into current "Angular 1" application.

 

Thank for reading.

Note: Please like and share to your friends if you think this is usefull article, I really appreciate

Comments (1) -

898170 51086Hey! Great stuff, please keep us posted when you post something like that! 234119

Reply

Add comment