Ej1 api migration in Angular Combo box component

6 Apr 202511 minutes to read

This article describes the API migration process of ComboBox component from Essential® JS 1 to Essential® JS 2.

DataBinding

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: dataSource
<input id="dropdown1" ej-combobox [dataSource]="data" /> 		Property: dataSource
<ejs-combobox [dataSource]="dataSource"></ejs-combobox>
Fields for mapping Property: fields
<input id="dropdown1" ej-combobox [fields]="fieldsvalues"/> 		Property: fields
<ejs-combobox [fields]="fields"></ejs-combobox>
Query Property: query
<input id="dropdown1" ej-combobox [query]="query"/> 		Property: query
<ejs-combobox [query]="query"></ejs-combobox>
Begin event Event:actionBegin
<input id="dropdown1" ej-combobox (actionBegin)="actionBegin($event)"/> 		Event: actionBegin
<ejs-combobox (actionBegin)="actionBegin($event)"></ejs-combobox>
Complete event Event:actionComplete
<input id="dropdown1" ej-combobox (actionComplete)="actionComplete($event)"/> 		Event: actionComplete
<ejs-combobox (actionComplete)="actionComplete($event)"></ejs-combobox>
Failure event Event:actionFailure
<input id="dropdown1" ej-combobox (actionFailure)="actionFailure($event)"/> 		Event: actionFailure
<ejs-combobox (actionFailure)="actionFailure($event)"></ejs-combobox>

Filtering

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowFiltering
<input id="dropdown1" ej-combobox [allowFiltering]="allowFiltering"/> 		Property: allowFiltering
<ejs-combobox [allowFiltering]="true"></ejs-combobox>
No records template Property: noRecordsTemplate
<input id="dropdown1" ej-combobox [noRecordsTemplate]="noRecordsTemplate"/> 		Property: noRecordsTemplate
<ejs-combobox [noRecordsTemplate]="template"></ejs-combobox>
Ignore casing and diacritics Not Applicable Property: ignoreAccent
<ejs-combobox [ignoreAccent] = "true"/>
Custom value addition Property: allowCustom
<input id="dropdown1" ej-combobox [allowCustom]="allowCustom"/> 		https://ej2.syncfusion.com/angular/demos/#/material/combo-box/custom-value
Search event Event: filtering
<input id="dropdown1" ej-combobox (filtering) = "onFiltering($event)"/> 		Event: filtering
<ejs-combobox (filtering) = "onFiltering($event)"/>

Template

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: itemTemplate
<input id="dropdown1" ej-combobox [itemTemplate]="itemTemplate"/> 		Property: itemTemplate
<ejs-combobox [itemTemplate]="itemTemplate"></ejs-combobox>
Group Template Property: groupTemplate
<input id="dropdown1" ej-combobox [groupTemplate]="groupTemplate"/> 		Property: groupTemplate
<ejs-combobox [groupTemplate]="groupTemplate"></ejs-combobox>
ValueTemplate Not Applicable Property: valueTemplate
<ejs-combobox [valueTemplate] = "valueTemplate"/>
Header Template Property: headerTemplate
<input id="dropdown1" ej-combobox [headerTemplate]="headerTemplate"/> 		Property: headerTemplate
<ejs-combobox [headerTemplate]="headerTemplate"></ejs-combobox>
FooterTemplate Property: footerTemplate
<input id="dropdown1" ej-combobox [footerTemplate]="footerTemplate"/> 		Property: footerTemplate
<ejs-combobox [footerTemplate]="footerTemplate"></ejs-combobox>
No records Template Property: noRecordsTemplate
<input id="dropdown1" ej-combobox [noRecordsTemplate]="noRecordsTemplate"/> 		Property: noRecordsTemplate
<ejs-combobox [noRecordsTemplate]="noRecordsTemplate"></ejs-combobox>
Auto fill Property: autoFill
<input id="dropdown1" ej-combobox [autoFill]="autoFill"/> 		Property: autoFill
<ejs-combobox [autoFill]="true"></ejs-combobox>
Action failure Template Property: actionFailureTemplate
<input id="dropdown1" ej-combobox [actionFailureTemplate]="actionFailureTemplate"/> 		Property: actionFailureTemplate
<ejs-combobox [actionFailureTemplate]="actionFailureTemplate"></ejs-combobox>

Applying CSS

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: cssClass
<input id="dropdown1" ej-combobox [cssClass]="cssClass"/> 		Property: cssClass
<ejs-combobox [cssClass]="customclass"></ejs-combobox>
width Property: width
<input id="dropdown1" ej-combobox [width]="width"/> 		Property: width
<ejs-combobox [width]="200px"></ejs-combobox>

Grouping

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: fields
<input id="dropdown1" ej-combobox [fields]="fields"/> 		Property: fields
<ejs-combobox [fields]="field"></ejs-combobox>

Accessibility

Behavior API in Essential® JS 1 API in Essential® JS 2
Globalization Property: locale
<input id="dropdown1" ej-combobox [locale]="locale"/> 		Property: locale
<ejs-combobox [locale]="locale"/>
Rtl support Property: enableRtl
<input id="dropdown1" ej-combobox [enableRtl]="enableRtl"/> 		Property: enableRtl
<ejs-combobox [enableRtl]="true"/>

Placeholder

Behavior API in Essential® JS 1 API in Essential® JS 2
Watermark text Property: placeholder
<input id="dropdown1" ej-combobox [placeholder]="placeholder"/>
Property: placeholder
<ejs-combobox [placeholder]="select"/>
Floating of watermark text Not applicable Property: floatLabelType
<ejs-combobox [floatLabelType]="floatLabelType"/>

Miscellaneous

Behavior API in Essential® JS 1 API in Essential® JS 2
Enable/disable Property: enabled
<input id="dropdown1" ej-combobox [enabled]="enabled"/> 		Property: enabled
<ejs-combobox [enabled]="true"/>
Read only Property: readOnly
<input id="dropdown1" ej-combobox [readOnly]="readOnly"/> 		Property: readOnly
<ejs-combobox [readOnly]="true"/>
Addition of Html attributes Property: htmlAttributes
<input id="dropdown1" ej-combobox [htmlAttributes]="htmlAttributes"/> 		Property: htmlAttributes
<ejs-combobox [htmlAttributes]="htmlAttributes"/>

Sorting

Behavior API in Essential® JS 1 API in Essential® JS 2
Order of sorting Property: sortOrder
<input id="dropdown1" ej-combobox [sortOrder]="sortOrder"/> 		Property: sortOrder
<ejs-combobox [sortOrder]="sortOrder"/>

Selection

Behavior API in Essential® JS 1 API in Essential® JS 2
Selecting particular index Property: index
<input id="dropdown1" ej-combobox [index]="index"/> 		Property: index
<ejs-combobox [index]="index"/>
Selecting particular value Property: value
<input id="dropdown1" ej-combobox [value]="value"/> 		Property: value
<ejs-combobox [value]="data"/>
Selecting particular text Property: text
<input id="dropdown1" ej-combobox [text]="text"/> 		Property: text
<ejs-combobox [text]="data"/>
Getting data by using value Method: getItemDataByValue
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejDropDownList(‘getItemDataByValue’,”data”)		 Method: getDataByValue
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.getDataByValue(“data”);
Select event Event: select
<input id="dropdown1" ej-combobox (select)="onSelect($event)"/> 		Event: select
<ejs-combobox (select)="onSelect($event)"/>
Behavior API in Essential® JS 1 API in Essential® JS 2
Popup height Property: popupHeight
<input id="dropdown1" ej-combobox [popupHeight]="popupHeight"/> 		Property:popupheight
<ejs-combobox [popupHeight]="300px"/>
Popup width Property: popupWidth
<input id="dropdown1" ej-combobox [popupWidth]="popupWidth"/> 		Property:popupWidth
<ejs-combobox [popupWidth]="300px"/>
Popup showing manually Method: showPopup
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“showPopup”);		 Method: showPopup
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.showPopup();
Popup hiding manually Method: hidePopup
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“hidePopup”);		 Method: hidePopup
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.hidePopup();
Popup hide event Event: close
<input id="dropdown1" ej-combobox (close)="onClose($event)"/> 		Event: close
<ejs-combobox (close)="onClose($event)"/>
Popup shown event Event: open
<input id="dropdown1" ej-combobox (open)="onopen($event)"/> 		Event: open
<ejs-combobox (open)="onopen($event)"/>

Common

Behavior API in Essential® JS 1 API in Essential® JS 2
Adding new item Method : addItem
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“addItem”, { text :”India”});		 Method: addItem
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.addItem({Id: ‘id’, Game: ‘Golf’},2);
Focus out event Not applicable Event: blur
<ejs-combobox (blur)="onblur($event)"/>
Focus in event Event: focus
<input id="dropdown1" ej-combobox (focus)="focus($event)"/> 		Event: focusIn
<ejs-combobox (focusIn)="onopen($event)"/>
Focus out Method: focusOut
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“focusOut”);		 Method: focusOut
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.focusOut();
Focus in Method: focusIn
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“focusIn”);		 Method: focusIn
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.focusIn();
Getting the data Method : getItems
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“getItems”);		 Method: getItems
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.getItems();
Create event Event: create
<input id="dropdown1" ej-combobox (create)="create($event)"/> 		Event: created
<ejs-combobox (created)="created($event)"/>
Change event Event: change
<input id="dropdown1" ej-combobox (change)="change($event)"/> 		Event: change
<ejs-combobox (change)="change($event)"/>
Custom value event Event: customValueSpecifier
<input id="dropdown1" ej-combobox (customValueSpecifier)="customValueSpecifier($event)"/> 		Event: customValueSpecifier
<ejs-combobox (customValueSpecifier)="customValueSpecifier($event)"/>