Quick Contact


    AngularJS Data Binding

    In software development technologies, Data Binding is the most powerful and valuable feature. Data binding is the synchronization of data between business logic and view of the application. It serves as a bridge between two components of angular that is the model part and view part. Data Binding is automatic and provides a way to wire the two essential elements of an application: the UI and application data.

    Whenever some changes are done at the model side, it is reflected at the view side too and vice versa. This happens so rapidly to make sure that the view and the model part will update all the time.

    Use of Data Binding in AngularJS

    The directive in AngularJS to bind the input field’s value (such as text field, text area) to the HTML element is ng-model. An ng-model directive is used to perform data binding in angular.

    We don’t have to write extra code to link the model part with the view part; by adding few snippets of code, we can bind the data with the HTML control.

    Example
    	< !DOCTYPE html>  
    	< html>  
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script>  
    	< body>  
    	< div ng-app="" ng-init="firstName='Rohit'"> 
    	< p>Write Your Firstname:< /p>  
    	< p>Name: < input type="text" ng-model="firstName">< /p> 
    	< p>You wrote: {{ firstName }}< /p>  
    	< /div>  
    	< /body>  
    	< /html>
    	
    Output

    Write Your Firstname:

    Name:

    You wrote: {{ firstName }}

    As you write something in the textbox, it gets reflected in the view part also.

    See this, an output of the same code when the user types something in a text box.

    Output

    Write Your Firstname:

    Name:

    You wrote: {{ firstName }}

    Whenever we change the text in a textbox, the same changes are reflected in the view part also. This is because, in the above code, the expression written inside double curly braces is {{firstName}}. And the expression {{ firstName }} bound with the ng-model directive (“firstName”).

    Note:

    We can apply data binding to any number of application data. There is no restriction on the number of application data on which we can use data binding. In the above example, we applied data binding only on one application data; similarly, we can apply it on more application data.

    Types of Data Binding in AngularJS

    The various types of binding in angularJS are as follow:

    • One Way Data Binding
    • Two Way Data Binding

    Enroll Yourself in Live Classes For Online Summer Training.

    One Way Data Binding

    In one-way data binding, the flow of data restricts to one side only, from model to view. It follows a unidirectional approach. In updating the model part, the same will sync in the view part also, but vice versa is not possible as, in one way, binding data can’t flow from view to model.

    Interpolation binding (an expression is taken as an input and changed as a text using HTML elements), property binding (Value of a property is set on an HTML element) comes in the category of one-way data binding in AngularJS.

    Two Way Data Binding in AngularJS

    In the case of two data binding in AngularJS, data flow does not restrict to one side only. A flow of data is from model to view, and the model view is also possible. Two-way data binding follows a bidirectional approach as a flow of information is possible on both sides. Any changes made in the model part will sync in the view part, and any modifications made in the view part are also synced in the model part.

    Angular JS Data Binding

    Event binding (an event triggers at the view side by the user event binding allows components to listen to that event.) comes in the category of two-way data binding in AngularJS.

    The syntax for event binding:

    < button (click)='updateProduct()'>

    Update

    < /button>

    (click) is the event here. An event is always written in parenthesis.

    ‘updateproduct()’ is the method here. A technique is written just after the event

    Whenever the event triggers by the user, the method is called.

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.