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

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 }}) 
      } 
}

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

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.");        
    }
}

Essential JS 1 Angular Overview

Property Binding

Event Binding

Two-way Binding

Setting complex properties dynamically

Invoking EJ widget methods from component instance