AngularJS

10 Aug 20176 minutes to read

Essential JS includes AngularJS directives for all controls in the ej.widget.angular.min.js script file. All the Essential JS directives have been encapsulated into a single module called ejangular so the first step would be to declare dependency for this module within your AngularJS application.

JAVASCRIPT

angular.module('DateCtrl', ['ejangular'])
     .controller('DatePickerCtrl', function ($scope) {
         $scope.dateValue = "2/3/2013";
});

All the Syncfusion widget’s control directives are prefixed with ej- to avoid conflict with other library directives and its properties are defined using e- prefix followed by the property name. The code example for defining controls in AngularJS is as follows,

HTML

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="DateCtrl">
  <head>
    <title>Essential Studio for JavaScript : DatePicker - AngularJS</title>
  </head>
  <body ng-controller="DatePickerCtrl">
    <input id="datepick" ej-datepicker e-value="dateValue" e-enableStrictMode="true" />
  </body>
</html>

In the above code snippet, ej-datepicker denotes the control directive for the Syncfusion’s datepicker widget and all its properties are prefixed with the letter e- (For example, e-value).

Data binding

When a widget’s model (ng-model) attribute is bound to a scope variable, it can reflect the changes both ways. In general, we could have more than one property bound to the same variable.

The below table depicts the properties of all the Syncfusion widgets that supports model binding -

Control	Supported properties
ejAccordion	-
ejAutoComplete	value
ejBarcode	-
ejBulletGraph	value comparativeMeasureValue
ejButton	-
ejChart	xZoomFactor yZoomFactor xZoomPosition yZoomPosition
ejCheckBox	-
ejCircularGauge	value minimum maximum
ejDatePicker	value
ejDateTimePicker	value
ejDiagram	-
ejDialog	-
ejDigitalGauge	value
ejDropDownList	value
ejGantt	selectedItem
ejGrid	dataSource selectedRow pageSettings.currentPage
ejLinearGauge	value minimum maximum
ejMaps	zoomLevel minZoom zoomFactor maxZoom baseMapIndex
ejMaskEdit	value
ejMenu	-
ejOlapChart	title.text commonSeriesOptions.type locale
ejOlapClient	Title gridLayout displaySettings.mode displaySettings.defaultView displaySettings.controlPlacement displaySettings.enableTogglePanel locale
ejOlapGauge	rowsCount columnsCount showHeaderLabel locale radius frameType
ejPivotGrid	Layout enableCellContext hyperlinkSettings.enableValueCellHyperlink hyperlinkSettings.enableRowHeaderHyperlink hyperlinkSettings.enableColumnHeaderHyperlink hyperlinkSettings.enableSummaryCellHyperlink
ejRadioButton	-
ejRangeNavigator	-
ejRating	currentValue
ejRTE	value
ejRotator	-
ejSchedule	fields.dataSource currentView currentDate
ejScroller	scrollTop scrollLeft
ejSlider	value values
ejSplitButton	-
ejSplitter	-
ejTab	-
ejTagCloud	-
ejNumericTextbox	value
ejPercentageTextbox	value
ejCurrencyTextbox	value
ejTimePicker	value
ejToggleButton	-
ejToolbar	-
ejTreemap	dataSource colorValuePath weightValuePath
ejTreeView	-
ejUploadbox	-
ejWaitingPopup	-

Model binding has been demonstrated in the below code,

HTML

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="DateCtrl">
  <head>
    <title>Essential Studio for JavaScript : DatePicker - AngularJS</title>
    <!-- SCRIPT & CSS REFERENCE SECTION -->
  </head>
  <body ng-controller="DatePickerCtrl">
    <input id="mydatepicker1" ej-datepicker  e-value="dateValue" e-enableStrictMode="true" />
    <input id="mydatepicker2" ej-datepicker  e-value="dateValue" e-enableStrictMode="true" />
    <script type="text/javascript">
        angular.module('DateCtrl', ['ejangular'])
           .controller('DatePickerCtrl', function ($scope) {
               $scope.dateValue = "01/01/2015";
        });
    </script>
  </body>
</html>

##Event binding

Events can be bind to controls using the prefix e- and particular event name. For example, to bind change event on ejDatePicker, we need to define attribute as e-change="dateChanged". Refer the following snippet for complete example.

HTML

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="DateCtrl">
  <head>
    <title>Essential Studio for JavaScript : DatePicker - AngularJS</title>
    <!-- SCRIPT & CSS REFERENCE SECTION -->
  </head>
  <body ng-controller="DatePickerCtrl">
    <input id="mydatepicker1" ej-datepicker e-value="dateValue" e-enableStrictMode="true" e-change="dateChanged" />
    <script type="text/javascript">
        angular.module('DateCtrl', ['ejangular'])
           .controller('DatePickerCtrl', function ($scope) {
               $scope.dateValue = "01/01/2015";
               $scope.dateChanged = function(e){
                   // console.log('Date value changed to ' + e.value)
               }
        });
    </script>
  </body>
</html>

In controller, you can get the reference to the ej widgets using the ID of particular widget in AngularJS scope. Refer the following code example.

HTML

<body ng-controller="DatePickerCtrl">
    <input id="myDatePicker" ej-datepicker e-value="dateValue" e-enableStrictMode="true" e-change="dateChanged" />

    <script type="text/javascript">
        angular.module('DateCtrl', ['ejangular'])
           .controller('DatePickerCtrl',["$scope", function ($scope) {
               $scope.dateValue = "01/01/2015";
               $scope.dateChanged = function(e){
                  alert($scope.myDatePicker.model.value)
               }
        }]);
    </script>
  </body>

NOTE

Since the widgets rendered after the controller, we can’t access the widget object and their members like properties/methods inside controller. So we need to use callback functions or ‘$postLink’ (in case of custom directives). For more information about component Life-cycle refer the link

You can set whole ej widgets configuration using particular component attribute. Please find the code snippet for the same:

HTML

<body ng-controller="DatePickerCtrl">
    <input id="mydatepicker" ej-datepicker="dateSettings" />

    <script type="text/javascript">
        angular.module('DateCtrl', ['ejangular'])
           .controller('DatePickerCtrl', ["$scope", function ($scope) {
               $scope.dateSettings = { value: new Date(2013, 06, 28), dateFormat: "MM/dd/yyyy" }
           }]);
    </script>
    
  </body>

AngularJS

Data binding

Getting Widget Reference in Controller

Widget Configuration in Controller