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.
<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.
<input type="text" ej-autocomplete (open)="onOpen($event)" />
Define event definition at component model as like the below code example.
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.
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 }})
}
}
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.
<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.
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
fromej-angular2
package inapp.module.ts
file
- We can invoke the
clearText
method ofejAutocomplete
widget usingViewChild
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.");
}
}