The Syncfusion Angular components of Essential JavaScript 1 (jQuery-based widgets) are no longer actively developed, and the 2022 Volume 4 marked the last release. Users are encouraged to switch to the Syncfusion Angular components of the Essential JS 2 library, which has been specifically designed to be lightweight and modular. Its size can be further optimized by including only the necessary controls and features for your application. For more information, please check out the Syncfusion Angular of Essential JS 2 library’s documentation and demo.
Overview of Syncfusion Essential AngularJS
1 Mar 20238 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. To render our ej controls in angular, you need to refer the angular.min.js and ej.widget.angular.min.js in your application.
Create a new HTML file and include the below code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="DateCtrl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
<!-- Style sheet for default theme (flat azure) -->
<link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<!--Scripts-->
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
<script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
<script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
<script src="http://cdn.syncfusion.com/24.2.3/js/common/ej.widget.angular.min.js"></script>
<!--Add custom scripts here -->
</head>
<body ng-controller="DatePickerCtrl">
<!-- add necessary HTML elements here -->
</body>
</html>The ng-app directive explains the root element (<html> or <body> tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you will have to define your directives, services, filters and configurations.
A controller is defined using ng-controller directive. Each controller accepts an object $scope which we pass as a parameter. This object is used to bind the controller with view.
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,
Create INPUT element and add in the body tag as below.
<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" />
</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).
To render the ejDatePicker using angular directive, we need to inject the ejangular module with modules.
angular.module('DateCtrl', ['ejangular'])
.controller('DatePickerCtrl', function ($scope) {
$scope.dateValue = "2/3/2013";
});
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 selectedRowIndices |
| 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 xmlns="http://www.w3.org/1999/xhtml" ng-app="DateCtrl">
<head>
<title>Essential Studio for JavaScript : DatePicker - Angular</title>
<!-- SCRIPT & CSS REFERENCE SECTION -->
</head>
<body ng-controller="DatePickerCtrl">
<input id="datepicker1" ej-datepicker e-value="dateValue" e-enableStrictMode="true" />
<input id="datepicker2" 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 xmlns="http://www.w3.org/1999/xhtml" ng-app="DateCtrl">
<head>
<title>Essential Studio for JavaScript : DatePicker - Angular</title>
<!-- SCRIPT & CSS REFERENCE SECTION -->
</head>
<body ng-controller="DatePickerCtrl">
<input id="datepicker1" 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>Getting Widget Reference in Controller
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.
<body ng-controller="DatePickerCtrl">
<input id="datepicker" 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.datepicker.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
Widget Configuration in Controller
You can set whole ej widgets configuration using particular component attribute. Please find the code snippet for the same:
<body ng-controller="DatePickerCtrl">
<input id="datepicker" 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>