What is Data binding in AngularJS
In this post, you’ll learn about binding data in AngularJS. You consider data binding as the most important and useful feature of software development technologies. Here you’ll learn possibilities, forms with syntax, and examples in this AngularJS Data Binding Tutorial. So, are you prepared to learn Linking Data in AngularJS. if yes! go through the following article
What is Binding on Data?
Binding data is the integration of data between business logic and application view. It acts as a bridge between two angular elements which is part of the model and part of view. Data Binding is automatic and provides a way to connect the two important components of an application that are the UI and data for the application.
To get in-Depth knowledge on Angularjs you can enroll for a live demo on Angular Online Training
It is also mirrored on the view side when some changes are made on the model side and vice versa is also possible. It happens so easily that the vision and the portion of the model can be changed all the time.
How Data Binding in AngularJS is possible?
Now when you are clear about the idea of data binding, the question arises what allows data binding to be performed in AngularJS.
The response is “Guidelines” In AngularJS the directive used to connect the input field value such as text field, text area to the HTML element is ng-model. An ng-model directive is used for the angular binding of the data.
You don’t have to write extra code to connect the part of the model to the part of view. Just by adding a few code snippets, you can attach the data to the HTML control.
See this, when a user types something in a text box, an output of the same language.
Take your career to new heights of success with Angular Training
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" >
<p>Input in the input box:</p>
<p>Name: <input type="text" ng-model="language"></p>
<p>You are learning: {{ language }}</p>
</div>
</body>
</html>Output: Name: AngularJS
If you change the text in a textbox, the same changes are also reflected in the view portion. It is because the expression inside double curly braces written in the above code is {{language}}. And the {{language}} expression that is bound by the ng-model guideline (‘language’).
All-time, the view part works like the model part projection.
You can add binding data to any number of data about the query. There is no limit on the amount of application data that you can apply binding data. In the example above, you used data binding only on one application data similarly you can extend it to more application data as well.
To learn more about Data binding in AngularJS and other great features of AngularJS, you can enroll for a live demo on Angularjs Online Course
Data binding types in AngularJS
The various forms of binding in angularJS are as follows:
- One way data binding
- Two way data binding
One Way Data Binding
In one-way data binding, a data flow is limited to only one side and that is from model to view. A unidirectional approach follows. In the case of updating in the model component, the same would also be synchronized in the view component but the vice versa is not possible as binding data cannot flow from view to model in one way.
One way data binding in AngularJS
One way data binding in AngularJS interpolation binding, an expression is taken as an input and is modified as a text using HTML elements, property binding property value is applied to an HTML element is in the one-way data binding group of AngularJS.
Different types of one-way data binding:(component to view)
- Interpolation Binding
- Property Binding
- Attribute Binding
- Class Binding
- Style Binding
Interpolation Binding
You place the name of the component property in the View template, enclosed in double curly braces. {{Property Name}}
Interpolation is nothing, in plain words, but how you use this binding expression {{}} in your project. Let us see an example of this.
Clear File name for example: index.html
<!DOCTYPE html>
<html> e
<head>
<title>AngularJs program</title>
<base href="/src/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!—use polyfill for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<!—You may identify selector mapping here-->
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>File Name: app.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'my-App',
template: `
<div>
<strong>{{firstname}}</strong>
<strong>{{lastname}}</strong>
</div>
})
export class AppComponent {
firstname: string = "Sachin";
lastname:string = "Tendulkar"
}Output
Property Binding
The values of the component / model properties are binding to the HTML element.
This will change the current behavior of the HTML element, depending on the values.
Syntax [property] =’expression’
There is source and target in the binding of the properties. You can define it as [innerHTML] = ‘firstname’ for this example. In this case, innerHTML is a target that is a span tag property, and the source is a component property i.e. first name.
import { Component } from "@angular/core";
@Component({
selector: 'my-App',
template: `
<div>
<span [innerHTML]='firstname'></span>
</div>
})
export class AppComponent {
firstname: string = "Sachin";
}Attribute Binding
You can set the value of an attribute directly with a binding attribute. The point to remember is you only need to use the binding attribute when there is no binding element property there.
For instance, here are the elements that don’t have the property attributes = > ARIA, SVG, and table period.
<table border="1">
<thead>
<tr>
<th [attr.colspan]="2">Student Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>First Name</td>
<td>{{firstName}}</td>
</tr>
<tr>
<td>Last Name</td>
<td>{{lastName}}</td>
</tr>
<tr>
<td>Gender</td>
<td>{{gender}}</td>
</tr>
<tr>
<td>Qualification</td>
<td>{{qualification}}</td>
</tr>
</tbody>
</table>Class Binding
By using the binding feature, you can add and delete CSS feature names from HTML elements This is similar to the binding attribute except it begins with the prefix class, usually followed by a dot()and the name of a CSS class: [class. Class-name]
Example of adding a class
<style>
.txtcenter{
text-align:center;
}
.txtright{
text-align:right;
}
.txtleft{
text-align:left;
}
</style>
<table border="1">
<thead>
<tr>
<th [attr.colspan]="2" class="txtcenter" [class.txtright]='true'>Student Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>First Name</td>
<td>{{firstName}}</td>
</tr>
<tr>
<td>Last Name</td>
<td>{{lastName}}</td>
</tr>
<tr>
<td>Gender</td>
<td>{{gender}}</td>
</tr>
<tr>
<td>Qualification</td>
<td>{{qualification}}</td>
</tr>
</tbody>
</table>Style binding:
A significant point here is that it is used to set the style of a single line. If you want to submit multiple line style, then Angular gives NgStyle, a strong attribute directive.
The syntax for Both attribute and class binding is identical. This always begins with the prefix form, followed by a dot() and the name of a property in CSS form: [style. Property-style].
<thead><tr><th [attr.colspan]="2" [style.font-size.px]="50">Student Details</th></tr></thead>
Two Way Data Binding in AngularJS
In the case of two data bindings in AngularJS the data flow is not limited to just one side. A flow of data is also possible from model to model as is the view to the model. Binding data in two ways follows a bidirectional approach, as data flows on both sides are possible. Any changes made in the model part are synchronized in view part as well as any changes made in view part are also synchronized in the model part.
Event binding
an event that causes user event binding on the side of view allowing components to listen to that event is included in AngularJS’ category of two-way data binding.
The syntax for the linking of events: <button (click)=’updateProduct()’> Update </button> (click) is here. There is always one case written in parenthesis.
Its form is ‘updateproduct).’ A method is written directly after the event If the user triggers the event, the method is called.
import { Component } from "@angular/core";
@Component({
selector: 'my-App',
template: `<button (click)='onClick()' >Click me</button>`
})
export class AppComponent {
onClick(): void {
console.log('you clicked me!!');
}
}Conclusion:
Data Binding in Angular is a very nice and useful function that can be easily incorporated in our projects. Hope the information above has been helpful. If you want to know more Angular, you can go for AngularJs online training.
