Data Binding in Angular

Pranam Bhat
Jun 15, 2021

What is “Data Binding” in Angular ?

Data Binding: Automatic synchronization of data between the model and view components.

One-Way Data Binding: Scope variable in the HTML is set to the first value.

Two-Way Data Binding: Scope variable changes it’s value every time.

Examples:

1) <input type = ”email” [value] = ”user.email”> /* Property Binding */

2) <button (click) = ”buttonEventClass()”> </button> /* Event Binding */

3) /* Interpolation */

<div ng-app=”myApp” ng-controller=”myCtrl”>

<p> First Name : ((firstname}} </p>

</div>

<script>

var app=angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope){

$scope.firstname = “ABC”;

});

</script>

Output:

First Name : ABC

--

--