Ej1 api migration in Angular Combo box component
4 Apr 202311 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)"/>
|
Popup
| 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)"/>
|