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:

  • HTML
  • <!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
  • <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.

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

    Render DatePicker

    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
  • <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
  • <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.

  • HTML
  • <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:

  • HTML
  • <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>