Ej1 api migration in Angular Toolbar component
13 Jul 202316 minutes to read
This article describes the API migration process of Toolbar component from Essential JS 1 to Essential JS 2.
Accessibility and Localization
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Localization | Not Applicable |
Property : locale<ejs-toolbar id='toolbar' locale='fr-BE'></ejs-toolbar>
|
| Right to left |
Property: enableRTL<ej-toolbar id="toolbar" [enableRTL]="true"></ej-toolbar>
|
Property: enableRTL<ejs-toolbar id='toolbar' [enableRTL]='true'> </ejs-toolbar>
|
DataSource
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| DataSource |
Property : dataSource<ej-toolbar id="toolbar" [dataSource]="items" ></ej-toolbar>
|
Not Applicable |
| Query |
Property : query <ej-toolbar id="toolbar" [query]="query"></ej-toolbar>
|
Not Applicable |
| Fields |
Property: fields<ej-toolbar id="toolbar" [fields]="fields"></ej-toolbar>
|
Not Applicable |
| Group |
Property : group<ej-toolbar id="toolbar" [fields]="fields"></ej-toolbar>TS: public fields: Object = { group: ‘’ } |
Not Applicable |
| HtmlAttributes |
Property : htmlAttributes<ej-toolbar id="toolbar" [fields]="fields"></ej-toolbar>TS: public fields: Object = { htmlAttributes: { } } |
Not Applicable |
| Id |
Property : id <ej-toolbar id="toolbar" [fields]="fields"></ej-toolbar>TS: public fields: Object = { id: ‘’ } |
Not Applicable |
| ImageAttributes |
Property: imageAttributes<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>TS: public fields: Object = { imageAttributes: { } } |
Not Applicable |
| ImageUrl |
Property: imageUrl<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>TS: public fields: Object = { imageUrl: ‘’} |
Not Applicable |
| SpriteCssClass |
Property: spriteCssClass<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>TS: public fields: Object = { spriteCssClass: ‘’} |
Not Applicable |
| Text |
Property: text<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>TS: public fields: Object = { text: ‘’} |
Not Applicable |
| TooltipText |
Property: tooltipText<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>TS: public fields: Object = { tooltipText: ‘’} |
Not Applicable |
| Template |
Property: template<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>TS: public fields: Object = { template: ‘’} |
Not Applicable |
Items
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Default | <Property : items<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
|
Property : items<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
|
| Align | Not Applicable |
Property : items[0].Align <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ align: ‘center’}]; |
| Custom class | Not Applicable |
Property : items[0].cssClass <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ cssClass: ‘e-class’}]; |
| Group Name |
Property : items[0].group <ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>TS: public items: Object[] = [{ group: ‘’}]; |
Not Applicable |
| HtmlAttributes |
Property : items[0].htmlAttributes <ej-toolbar id="toolbar" [items]="items"> </ej-toolbar> </ej-toolbar>TS: public items: Object[] = [{ htmlAttributes: { } }]; |
Property : items[0].htmlAttributes <ejs-toolbar id="toolbar" [items]="items"> </ej-toolbar> </ejs-toolbar>TS: public items: Object[] = [{ htmlAttributes: { } }]; |
| Id |
Property : items[0].id <ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>TS: public items: Object[] = [{ id: ‘’ }]; |
Property : items[0].id <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ id: ‘’ }]; |
| ImageAttributes |
Property : items[0].imageAttributes <ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>TS: public items: Object[] = [{ imageAttributes: { } }]; |
Not Applicable |
| ImageUrl |
Property : items[0].imageUrl <ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>TS: public items: Object[] = [{ imageUrl: ‘’ }]; |
Not Applicable |
| Overflow | Not Applicable |
Property : items[0].overflow <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ overflow: ‘popup’ }]; |
| PrefixIcon | Not Applicable |
Property : items[0].prefixIcon <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ prefixIcon: ‘e-icon’ }]; |
| ShowAlwaysInPopup | Not Applicable |
Property : items[0].showAlwaysInPopup <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ showAlwaysInPopup: true }]; |
| ShowTextOn | Not Applicable |
Property : items[0].showTextOn <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ showTextOn: ‘popup’ }]; |
| Sprite CssClass |
Property : items[0].showTextOn <ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>TS: public items: Object[] = [{ spriteCssClass: ‘e-class’ }]; |
Not Applicable |
| SuffixIcon | Not Applicable |
Property : items[0].suffixIcon <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ suffixIcon: ‘e-icon’ }]; |
| Template |
Property : items[0].template <ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>TS: public items: Object[] = [{ template: ‘’ }]; |
Property : items[0].template <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ template: ‘’ }]; |
| Text |
Property : items[0].text <ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>TS: public items: Object[] = [{ text: ‘Cut’ }]; |
Property : items[0].text <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ text: ‘Copy’ }]; |
| TooltipText |
Property : items[0].tooltipText <ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>TS: public items: Object[] = [{ tooltipText: ‘Cut’ }]; |
Property : items[0].tooltipText <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{ tooltipText: ‘Copy’ }]; |
| Type | Not Applicable |
Property : items[0].type <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{type: ‘Button’}]; |
| Width | Not Applicable |
Property : items[0].width <ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>TS: public items: Object[] = [{width: ‘50’}]; |
| Disable Items |
Property : disabledItemIndices <ej-toolbar id="toolbar" disabledItemIndices="[]" > </ej-toolbar>
|
Method : enableItems(items, false) <ejs-toolbar id="toolbar" #Toolbar ></ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.enableItems([], false); |
| Add Items | Not Applicable |
Method :addItems(items, index) <ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.addItems([], 0); |
| Remove Item |
Method : removeItem(element) <ej-toolbar id="toolbar" #Toolbar></ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.removeItem(ele); |
Method :removeItems(args) <ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.removeItems(0); |
| RemoveItemById |
Method :select(index)<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.select(1); |
Not Applicable |
| Enable item |
Method :enableItem(element)<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.enableItem(ele); |
Method : enableItems(items, true)<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.enableItems(items, true); |
| EnableItemById |
Method : enableItemById(id)<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.enableItemById(‘left’); |
Not Applicable |
| Disable Item |
Method : disableItem(element)<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.disableItem(ele); |
Method :enableItems(items, true)<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.enableItems([], false); |
| DisableItemById |
Method : disableItemById(id)<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.disableItemById(‘left’); |
Not Applicable |
| Show item | Not Applicable |
Method : hideItem(index, false)<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.hideItem(0, false); |
| Hide item | Not Applicable |
Method : hideItem(index, true)<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.hideItem(0, true); |
| Select item |
Method :selectItem(element)<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.selectItem(ele); |
Not Applicable |
| SelectItemById |
Method : selectItemById(id)<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.selectItemById(‘left’); |
Not Applicable |
| DeselectItemById |
Method : deselectItemById(id)<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.deselectItemById(‘left’); |
Not Applicable |
| Clicked | Not Applicable |
Event: clicked <ejs-toolbar id="toolbar" (clicked)='onclicked($event)'></ejs-toolbar>TS: onclicked(event){ } |
| itemHover |
Event: itemHover<ej-toolbar id='toolbar' (itemHover)='onitemHover($event)'></ej-toolbar>TS: onitemHover(event){ } |
Not Applicable |
| itemLeave |
Event: itemLeave<ej-toolbar id='toolbar' (itemLeave)='onitemLeave($event)'></ej-toolbar>TS: onitemHover(event){ } |
Not Applicable |
Common
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Custom class |
Property : cssClass <ej-toolbar id="toolbar" cssClass="customClass" > </ej-toolbar>
|
Not Applicable |
| Enabled |
Property : enabled <ej-toolbar id="toolbar" enabled="false"> </ej-toolbar>
|
Not Applicable |
| EnableSeparator |
Property : enableSeparator <ej-toolbar id="Accordion" [enableSeparator]="false" > </ej-toolbar>
|
Not Applicable |
| Height |
Property : height <ej-toolbar id="toolbar" height="100%" > </ej-toolbar>
|
Property : height <ejs-toolbar id="toolbar" height="100%" > </ejs-toolbar>
|
| HtmlAttributes |
Property : htmlAttributes <ej-toolbar id="Accordion" [htmlAttributes]="attributes" > </ej-toolbar>TS: public attributes: Object = {class: “my-class”}; |
Not Applicable |
| Hide |
Property : hide() <ej-toolbar id="Accordion" [hide]="true" > </ej-toolbar>
|
Not Applicable |
| Orientation |
Property : orientation <ej-toolbar id="Accordion" [orientation]="horizontal" > </ej-toolbar>
|
Not Applicable |
| OverflowModes |
Property : responsiveType <ej-toolbar id="Accordion" [responsiveType]="popup" > </ej-toolbar>
|
Property : overflowMode <ejs-toolbars id="Accordion" [overflowMode]="popup" > </ejs-toolbar>
|
| Persistence | Not Applicable |
Property : enablePersistence <ejs-toolbar id="toolbar" [enablePersistence]="false" > </ejs-toolbar>
|
| Responsive |
Property : isResponsive <ej-toolbar id="Accordion" [isResponsive]="true" > </ej-toolbar>
|
Not Applicable |
| ShowRounderCorner |
Property : showRoundedCorner <ej-toolbar id="toolbar" [showRoundedCorner]="true" > </ej-toolbar>
|
Not Applicable |
| Width |
Property : width <ej-toolbar id="Accordion" [width]="600" > </ej-toolbar>
|
Property : width <ejs-toolbar id="Accordion" [width]="600" > </ejs-toolbar>
|
| Enable |
Method : enable() <ej-toolbar id="toolbar" #Toolbar></ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.enable(); |
Method : disable(false) <ejs-toolbar id="toolbar" #Toolbar></ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.disable(false); |
| Disable |
Method : disable() <ej-toolbar id="toolbar" #Toolbar></ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.disable(); |
Method : disable(true) <ejs-toolbar id="toolbar" #Toolbar></ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.disable(true); |
| Show |
Method : show() <ej-toolbar id="toolbar" #Toolbar></ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.show(); |
Not Applicable |
| Hide |
Method : hide() <ej-toolbar id="toolbar" #Toolbar></ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.hide(); |
Not Applicable |
| Refresh | Not Applicable |
Method : refresh() <ejs-toolbar id="toolbar" #Toolbar></ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.refresh(); |
| Destroy |
Method : destroy() <ej-toolbar id="toolbar" #Toolbar></ej-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.destroy(); |
Method : destroy() <ejs-toolbar id="toolbar" #Toolbar></ejs-toolbar>TS: @ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent; ToolObj.destroy(); |
| BeforeCreate | Not Applicable |
Event: created<ejs-toolbar id="toolbar" #Toolbar (created)='onbeforeCreate($event)'></ejs-toolbar>TS: onbeforeCreate(event) { } |
| Created |
Event: create<ej-toolbar id="toolbar" #Toolbar (create)='oncreate($event)'></ej-toolbar>TS: oncreate(event) { } |
Event: created<ejs-toolbar id="toolbar" #Toolbar (created)='oncreated($event)'></ejs-toolbar>TS: oncreated(event) { } |
| Destroyed |
Event: destroy<ej-toolbar id="toolbar" #Toolbar (destroy)='ondestroy($event)'></ej-toolbar>TS: ondestroy(event) { } |
Event: destroyed<ejs-toolbar id="toolbar" #Toolbar (destroyed)='ondestroyed($event)'></ejs-toolbar>TS: ondestroyed(event) { } |
| FocusOut |
Event: focusOut<ej-toolbar id="toolbar" #Toolbar (focusOut)='onfocusOut($event)'></ej-toolbar>TS: onfocusOut(event) { } |
Not Applicable |
| OverflowOpen |
Event: overflowOpen<ej-toolbar id="toolbar" (overflowOpen)='onoverflowOpen($event)'></ej-toolbar>TS: onoverflowOpen(event) { } |
Not Applicable |
| OverflowClose |
Event: overflowClose<ej-toolbar id="toolbar" (overflowClose)='onoverflowClose($event)'></ej-toolbar>TS: onoverflowClose(event) { } |
Not Applicable |