Following are the key points described later in this article:
Lets look at how did Data Binding look like in AngularJS 1. It was termed as two-way data binding with two-way signifying following:
Following diagram depicts 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>
In Angular 2, following diagram depicts the two-way data binding:
Take a look at 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++;
};
}
Following is how 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:
The above expressions is used to update the data from 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.
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. Following diagram depicts the same:
Last updated: 08th May, 2024 In the world of generative AI models, autoencoders (AE) and…
Last updated: 7th May, 2024 Linear regression is a popular statistical method used to model…
Last updated: 3rd May, 2024 Have you ever wondered why some machine learning models perform…
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…