Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Data Binding to Accommodate Component Relationships

DZone's Guide to

Data Binding to Accommodate Component Relationships

Angular 1 bragged about two-way data binding. However, Angular 2 decided to promote one-way data binding (like ReactJS), and two-way data binding is considered only as a special case. Read on for more information.

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

This article represents concepts and related code samples in relation with data binding in Angular 2 vis-a-vis component relationships. Those with prior experience in ReactJS (which propagates one-way binding) should find it easy to understand. Angular 1 bragged about two-way data binding; however, Angular 2 decided to promote one-way data binding (like ReactJS), and two-way data binding is considered only as a special case. 

Two-way Data Binding in AngularJS 1

Let's look at how Data Binding looks in Angular 1. It was termed as two-way data binding with two-way signifying following:

  • Any change in the model object would get updated on View.
  • Any change in the View would update the model object which would then update the view.

The diagram depicts two-way data binding in Angular 1.

Two way data binding in AngularJS 1


For example, in the sample code below, there is an input element with ng-model assigned to "name". And, then, the "name" is accessed/displayed elsewhere in the view using the syntax such as {{name}}. See the code such as <h1>Hello, {{name}}</h1>. With two-way data binding, any change in the input field will update the view with changed value. 

<body ng-app="HelloApp" ng-controller="HelloCtrl">
<h1>Hello, {{name}}</h1>
<hr/>
<form>
    <div>
      <input type="text" ng-model="name">
    </div>  
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script type="text/javascript">
angular.module('HelloApp', [])
.controller('HelloCtrl', ['$scope', function($scope){
$scope.name = "Calvin";
}])
</script>
</body>

Data Binding in Angular 2

The diagram depicts the two-way data binding in Angular 2.

Data Binding in Angular 2







Take a look at the following code:

@Component({
selector: 'hello'
directives: [UserComponent]
})
@View({
template = `
      <h1>Hello, {{name}}</h1>
      <form>
          <div>
            <input type="text" [(ng-model)]="name" (change)="updateCount()" username={{name}}/>
          </div>
      </form>
`
})
export class HelloComponent {
name = 'Calvin Hobbes';
count = 1;

updateCount = function() {
      this.count++;
    };

}

And now, here is what the code for "UserComponent" would look like. Note the usage of "inputs: [‘username’]" for making the username as input property.

@Component({
  selector: 'user',
  inputs: ['username']
})
@View({
  template: `
    My name is {{username}}!
  `
})
export class UserComponent {
  username: '';
}

In the diagram and code shown above, note the following:

  • Property Binding: This is one-way data binding. The component property name is bound to the target element property. Thus, the value from the component property flows to the target element. This is achieved using syntax such as:
    • {{expression}}
    • [target]=”expression”
    • bind-target=”expression”
    The above expressions are used to update the data from the component (data source) to the HTML view. With interpolation, the property is put into the template with double curly braces such as {{name}} in the code shown below.
  • Event Binding: This is one-way data binding. The event binding (change) calls the updateCount method when the user writes something in the input field. The event binding is represented using the expression: (event) = "statement" or on-event="statement". This expression means that if the user input leads to an event, the application state is updated based on "statement" which could be a method/API of the component. In simple words, with the above expression the application state is updated based on the user input. The event occurring with the target element is used to update the component state.
  • Property & Event Binding (Two-way Data Binding): The syntax  [(ng-model)]="name" combines property and event binding in a single notation using the ngModel directive. Generally speaking, two-way data binding is represented using expressions such as [(target)] = "expression" or bindon-target="expression". The change made to the input field flows to the component thereby resetting the value as in event binding, and the change to name in component flows to the input field as in property binding. The diagram depicts this. Image title

In the same way, with parent-child relationships, the changes made in child component’s template flows to parent component as in event binding, and changes made in property of parent component flows to the child component as in property binding. 

Image title


  • Property Binding for Parent-Child Relationship: Syntax such as [username]= "name" is used to bind the username property with parent’s component property where name should be an object. In this case, the username is required to be bound to interpolation string, the syntax would look like following: username = {{name}}.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:
angular 2 ,data binding

Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}