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.

Essential JS 1 Angular Overview

30 May 202317 minutes to read

Essential JavaScript provides support for Angular Framework through wrappers. Each Syncfusion widgets are created as Angular components with built in support for data binding to make complex property definition easier.

The Syncfusion Angular components are named with prefix ej to avoid conflicting with other library component and offers the following features.

  • Properties
  • Two-way binding
  • Event binding

The Essential JavaScript for Syncfusion Angular components supports Angular release version 6.0.0.

NOTE

To getting started with Syncfusion Angular seed application navigate to here.

Property Binding

Properties of Syncfusion controls can be initialized with the exact casing of original property names. Bind property to the controls within square bracket([]).

For example, create ejAutocomplete component with prefixing of ej- and control name then the properties dataSource and value can be defined as follows.

  • HTML
  • <input type="text" ej-autocomplete [value]= "Austin-Healey" [dataSource]="states" />

    NOTE

    The dataSource states will be defined in component.ts file.

    Event Binding

    Events can be bound to the controls using the event name within bracket [()]. For example, the open event of ejAutocomplete control can be defined as follows.

  • HTML
  • <input type="text" ej-autocomplete (open)="onOpen($event)" />

    Define event definition at component model as like the below code example.

  • JAVASCRIPT
  • export class AppComponent { 
        onOpen(e){
            console.log("Triggers after the suggestion list is opened.");        
        }
    }

    NOTE

    Get event argument values as e.data1,e.data2,e.data3.. (For ex,. for ejAutoComplete get type of event as e.type).

    Two-way Binding

    Two-way binding of Angular synchronizes the value in both view and component model using attribute [(ngModel)]. The same conversion is used for Syncfusion widgets which reflect the changes both ways. In general, we could have more than one property bound to the same variable.

    Two-way binding for ejAutocomplete has been demonstrated in the below code.

  • JAVASCRIPT
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'my-app',
        template: `<h2>Two-Way Binding</h2>
        <input type="text" ej-autocomplete [dataSource]="states" [(ngModel)]="value"/>
        <input type="text" name="AutoComplete" class="input ej-inputtext" [(ngModel)]="value" />
        `
    })
    export class AppComponent {
        states: Array<string>;
        value:string; 
        constructor() {
            this.states = [
             "Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
                        "BMW 7 ", "Bentley Mulsanne", "Bugatti Veyron",
                        "Chevrolet Camaro", "Cadillac ",
                        "Duesenberg J ", "Dodge Sprinter",
                        "Elantra", "Excavator",
                        "Ford Boss 302", "Ferrari 360", "Ford Thunderbird ",
                        "GAZ Siber",
                        "Honda S2000", "Hyundai Santro",
                        "Isuzu Swift", "Infiniti Skyline",
                        "Jaguar XJS",
                        "Kia Sedona EX", "Koenigsegg Agera",
                        "Lotus Esprit", "Lamborghini Diablo ",
                        "Mercedes-Benz ", "Mercury Coupe", "Maruti Alto 800",
                        "Nissan Qashqai",
                        "Oldsmobile S98", "Opel Superboss",
                        "Porsche 356 ", "Pontiac Sunbird",
                        "Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
                        "Triumph Spitfire ", "Toyota 2000GT",
                        "Volvo P1800", "Volkswagen Shirako"
            ];
            this.value="Jaguar XJS";
       }
    }

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

    Control Supported properties
    ejAccordion -
    ejAutoComplete -
    ejBarcode -
    ejBulletGraph featureMeasures-value
    featureMeasures-comparativeMeasureValue
    ejButton -
    ejChart xZoomFactor
    yZoomFactor
    xZoomPosition
    yZoomPosition
    legend.visibility
    ejCheckBox checked
    checkState
    ejCircularGauge value
    minimum
    maximum
    ejColorPicker value
    opacityValue
    ejDatePicker -
    ejDateTimePicker -
    ejDiagram -
    ejDialog -
    ejDigitalGauge value
    ejDropDownList value
    ejGantt dataSource
    selectedRowIndex
    splitterSettings.position
    ejGrid dataSource
    pageSettings.currentPage
    selectedRowIndices
    selectedRowIndex
    ejGroupButton -
    ejFileExplorer -
    ejHeatMap -
    ejHeatMapLegend -
    ejKanban dataSource
    ejLinearGauge value
    minimum
    maximum
    ejListBox value
    ejListView dataSource
    ejMap baseMapIndex
    enablePan
    enableResize
    enableAnimation
    zoomSettings.level
    zoomSettings.minValue
    zoomSettings.maxValue
    zoomSettings.factor
    zoomSettings.enableZoom
    zoomSettings.enableZoomOnSelection
    navigationControl.enableNavigation
    navigationControl.orientation
    navigationControl.absolutePosition
    navigationControl.dockPosition
    ejMaskEdit -
    ejMenu -
    ejNavigationDrawer -
    ejOverview -
    ejPivotGrid -
    ejPivotChart -
    ejPivotSchemaDesigner -
    ejPivotTreeMap -
    ejPivotGauge -
    ejProgressBar -
    ejRadialMenu -
    ejRadialSlider value
    ejRadioButton -
    ejRangeNavigator selectedRangeStart
    selectedRangeEnd
    ejRating value
    ejReportViewer -
    ejRibbon -
    ejRTE value
    ejRotator -
    ejSchedule appointmentSettings.dataSource
    currentView
    currentDate
    ejSignature -
    ejScroller -
    ejSlider value
    ejSparkline -
    ejSpellCheck -
    ejSplitter -
    ejSpreadsheet -
    ejSunburstChart -
    ejSymbolPalette -
    ejTab selectedItemIndex
    ejTagCloud -
    ejTooltip -
    ejTreeGrid dataSource
    selectedRowIndex
    ejNumericTextbox -
    ejPercentageTextbox -
    ejCurrencyTextbox -
    ejTile badge.value
    badge.enabled
    badge.text
    badge.position
    text
    caption.text
    ejTimePicker -
    ejToggleButton -
    ejToolbar -
    ejTreemap dataSource
    weightValuePath
    ejTreeView dataSource
    ejUploadbox -
    ejWaitingPopup -

    NOTE

    For complete understanding of Angular inputs and outputs binding syntaxes, refer this Angular help document.

    Setting complex properties dynamically

    Complex properties don’t have two-way binding support in Angular. To set these complex properties dynamically, use setModel option. For example, editSettings in Grid is a complex property and you can change this dynamically as done in the following code

  • TS
  • import {Component, ViewChild } from '@angular/core';
    import { EJComponents } from 'ej-angular2';
    
    @Component({
        selector: 'my-app',
        template: `<button (click)="set()">Click</button>
         <ej-grid #grid  [allowPaging]="true" [allowScrolling]="true" [toolbarSettings]="toolbarItems" [dataSource]="gridData">
           <e-columns>
            <e-column field="OrderID" headerText="Order ID"  width="85" textAlign="right"></e-column>
            <e-column field="CustomerID" headerText="Customer ID" textAlign="left"  width="100"></e-column>
            <e-column field="EmployeeID" headerText="Employee ID " width="120" textAlign="left"></e-column> 
            <e-column field="Freight" headerText="Freight" width="120" textAlign="left"></e-column> 
            <e-column field="ShipCity" headerText="Ship City " width="120" textAlign="left"></e-column>   
          </e-columns>
        </ej-grid>`
    })
    export class AppComponent {
         @ViewChild('grid') grid: EJComponents<any, any>; 
            public gridData; 
            public toolbarItems; 
            public Edit; 
           
            constructor() 
            { 
               this.gridData = window.gridData; 
               this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]}; 
               this.Edit = true; 
            } 
          
           set(e: any){  
               if(this.Edit) 
                  //update the editSettings based on value in button click event 
                  this.grid.widget.option({editSettings: {allowEditing:true,allowAdding: true,allowDeleting: true,showAddNewRow:true,rowPosition: ej.Grid.RowPosition.Bottom }}) 
            else 
                 this.grid.widget.option({editSettings: {allowEditing:false,allowAdding: false,allowDeleting: false,showAddNewRow:false,rowPosition: ej.Grid.RowPosition.Bottom }}) 
          } 
    }

    Invoking EJ widget methods from component instance

    You can invoke the ej widget’s public methods using Angular component instance reference like the below syntax.

  • JAVASCRIPT
  • <componentInstance>.widget.<methodName>(<params_if_any>)

    For example, to invoke clearText method of ejAutocomplete widget, you can use like myApp.widget.clearText(). So the complete code structure of app.component.ts will be as follows.

  • JAVASCRIPT
  • import {Component} from '@angular/core';
    
    @Component({
        selector: 'my-app',
        template: ` <h2>Two-Way Binding</h2>
        <button id="clearTxt" (click)="myApp.widget.clearText()">clearText</button>
        <input #myApp type="text" ej-autocomplete [dataSource]="states" (open)="onOpen($event)" [(ngModel)]="value"/>
        <input type="text" name="AutoComplete" class="input ej-inputtext" [(ngModel)]="value" />
        `
    })
    export class AppComponent {
        states: Array<string>;
        value:string; 
        constructor() {
            this.states = [
             "Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
                        "BMW 7 ", "Bentley Mulsanne", "Bugatti Veyron",
                        "Chevrolet Camaro", "Cadillac ",
                        "Duesenberg J ", "Dodge Sprinter",
                        "Elantra", "Excavator",
                        "Ford Boss 302", "Ferrari 360", "Ford Thunderbird ",
                        "GAZ Siber",
                        "Honda S2000", "Hyundai Santro",
                        "Isuzu Swift", "Infiniti Skyline",
                        "Jaguar XJS",
                        "Kia Sedona EX", "Koenigsegg Agera",
                        "Lotus Esprit", "Lamborghini Diablo ",
                        "Mercedes-Benz ", "Mercury Coupe", "Maruti Alto 800",
                        "Nissan Qashqai",
                        "Oldsmobile S98", "Opel Superboss",
                        "Porsche 356 ", "Pontiac Sunbird",
                        "Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
                        "Triumph Spitfire ", "Toyota 2000GT",
                        "Volvo P1800", "Volkswagen Shirako"
            ];
            this.value="Jaguar XJS";
       }
       onOpen(e){
            console.log("Triggers after the suggestion list is opened.");        
        }
    }

    NOTE

    Here, We don’t need to import the specific component file. Because all component files are import in EJAngular2Module from ej-angular2 package in app.module.ts file

    • We can invoke the clearText method of ejAutocomplete widget using ViewChild in model file. Refer the below code snippet
  • TS
  • import {Component, ViewChild } from '@angular/core';
    import { EJComponents } from 'ej-angular2';
    
    @Component({
        selector: 'my-app',
        template: ` <h2>Two-Way Binding</h2>
        <button id="clearTxt" #autocomplete (click)="buttonclick($event)">clearText</button>
        <input #myApp type="text" ej-autocomplete [dataSource]="states" (open)="onOpen($event)" [(ngModel)]="value"/>
        <input type="text" name="AutoComplete" class="input ej-inputtext" [(ngModel)]="value" />
        `
    })
    export class AppComponent {
        states: Array<string>;
        value:string; 
        @ViewChild('myApp') autocomplete: EJComponents<any, any>;
        constructor() {
            this.states = [
             "Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
                        "BMW 7 ", "Bentley Mulsanne", "Bugatti Veyron",
                        "Chevrolet Camaro", "Cadillac ",
                        "Duesenberg J ", "Dodge Sprinter",
                        "Elantra", "Excavator",
                        "Ford Boss 302", "Ferrari 360", "Ford Thunderbird ",
                        "GAZ Siber",
                        "Honda S2000", "Hyundai Santro",
                        "Isuzu Swift", "Infiniti Skyline",
                        "Jaguar XJS",
                        "Kia Sedona EX", "Koenigsegg Agera",
                        "Lotus Esprit", "Lamborghini Diablo ",
                        "Mercedes-Benz ", "Mercury Coupe", "Maruti Alto 800",
                        "Nissan Qashqai",
                        "Oldsmobile S98", "Opel Superboss",
                        "Porsche 356 ", "Pontiac Sunbird",
                        "Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
                        "Triumph Spitfire ", "Toyota 2000GT",
                        "Volvo P1800", "Volkswagen Shirako"
            ];
            this.value="Jaguar XJS";
       }
       buttonclick(e){
           this.autocomplete.widget.clearText();
       }
       onOpen(e){
            console.log("Triggers after the suggestion list is opened.");        
        }
    }