Contents
- Accessibility and Localization
- DataSource
- Items
- Common
Having trouble getting help?
Contact Support
Contact Support
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 |