Contents
- Accessibility and Localization
- DataSource
- Items
- Common
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in Angular Toolbar component
5 Apr 202516 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 |