Ej1 api migration in Angular Range navigator component

4 Apr 20236 minutes to read

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

RangeNavigator

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Allow snapping| Property: allowSnapping

<ej:RangeNavigator
[allowSnapping]="true">
</ej:RangeNavigator>|Property: allowSnapping

<ejs-rangenavigator [allowSnapping]='allowSnapping'>
</ejs-rangenavigator>
this.allowSnapping= true; |
|Animation duration| Not Applicable|Property: animationDuration

<ejs-rangenavigator [animationDuration]='animationDuration''>
</ejs-rangenavigator>
this.animationDuration= 2000;|
|Border for range navigator| Property: border

<ej:RangeNavigator
border.color="green" [border.opacity]="0.5" [border.width]="2">
</ej:RangeNavigator>|Property: navigatorBorder

<ejs-rangenavigator [navigatorBorder]='navigatorBorder'>
</ejs-rangenavigator>
this.navigatorBorder = { width: 4, color: ‘green’}|
|dataSource for range navigator| Property: dataSource

this.rangeData = function GetData(){};
<ej:RangeNavigator
[dataSource]="rangeData">
</ej:RangeNavigator>|Property: dataSource

<e-rangenavigator-series dataSource={data}>
</e-rangenavigator-series>|
|enabling deffered update for range navigator| Property: enableDeferedUpdate

<ej:RangeNavigator
[enableDeferredUpdate]="true">
</ej:RangeNavigator>|Property: enableDeferredUpdate

<ejs-rangenavigator [enableDeferredUpdate]='enableDeferredUpdate'>
</ejs-rangenavigator>
this.enableDeferredUpdate = true|
|multilevel level labels| Property: labelSettings.higherLevelLabels

this.labelSettings= { higherLevel: { } };
<ej:RangeNavigator
[labelSettings]="labelSettings">
</ej:RangeNavigator>|Property: enableGrouping

<ejs-rangenavigator [enableGrouping]='grouping'>
</ejs-rangenavigator>
this.grouping = true;|
|enabling scroll bar| Property: enableScrollBar

<ej:RangeNavigator
[enableScrollbar]= "true">
</ej:RangeNavigator>|Not Applicable|
|enabling auto resizing| Property: enableAutoResizing

<ej:RangeNavigator
enableAutoResizing="true"}>
</ej:RangeNavigator>|Not Applicable|
|enabling isResponsive| Property: isResponsive

<ej:RangeNavigator
isResponsive="true">
</ej:RangeNavigator>|Not Applicable|
|enabling RTL for range navigator| Property: enableRtl

<ej:RangeNavigator
enableRtl="true">
</ej:RangeNavigator>|Property: enableRtl

<ejs-rangenavigator [enableRtl]='enableRtl'>
</ejs-rangenavigator>
this.enableRtl = true;|
|interval for range navigator| Property: valueAxisSettings.interval

this.valueAxisSettings= {Interval: 5 };
<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>|Property: interval

<ejs-rangenavigator Interval=5 }'>
</ejs-rangenavigator>|
|intervaltype for range navigator| Property: valueAxisSettings.intervalType

this.valueAxisSettings= {intervalType: ‘Years’};
<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>|Property: intervalType

<ejs-rangenavigator intervalType='Years'>
</ejs-rangenavigator>|
|labelformat for range navigator| Not applicable|Property: labelFormat

<ejs-rangenavigator [labelFormat]='labelFormat'>
</ejs-rangenavigator>
this.labelFormat = ‘MMM’;|
|label intersect action for range navigator| Not applicable|Property: labelIntersectAction

<ejs-rangenavigator labelIntersectAction='Hide'>
</ejs-rangenavigator>|
|labelStyle range navigator| Property: valueAxisSettings.font

this.valueAxisSettings= {font: { } };
<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>|Property: labelStyle

<ejs-rangenavigator [labelStyle]='labelStyle'>
</ejs-rangenavigator>
this.labelStyle= { color: ‘red’, size:’10px’};|
|locale of range navigator| Property: locale

<ej:RangeNavigator
locale="fr-FR">
</ej:RangeNavigator>|Property: locale

<ejs-rangenavigator locale='en-US'>
</ejs-rangenavigator>|
|major grid lines of range navigator| Property: valueAxisSettings.majorGridLines

this.valueAxisSettings= { majorGridLines: { width: 2, color: ‘red’ } };
<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>|Property: majorGridLines

<ejs-rangenavigator [majorGridLines]='majorGridLines'>
</ejs-rangenavigator>
this.majorGridLines={ width: 4, color: ‘blue’, dashArray: ‘5,5’ };|
|margin of range navigator|Not Applicable|Property: margin

<ejs-rangenavigator [margin]='margin'>
</ejs-rangenavigator>
this.margin={ };|
|maximum value of range navigator| Property: valueAxisSettings.range.max

this.valueAxisSettings= { range: { max: 2 } };
<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>|Property: maximum

<ejs-rangenavigator maximum={34}>
</ejs-rangenavigator>|
|minimum value of range navigator| Property: valueAxisSettings.range.min

this.valueAxisSettings= { range: { min: 2 } };
<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>|Property: minimum

<ejs-rangenavigator minimum={4}>
</ejs-rangenavigator>|
|query for data source of range navigator| Not Applicable|Property: query

<ejs-rangenavigator query=''>
</ejs-rangenavigator>|
|Secondary label alignment of range navigator| Not Applicable|Property: secondaryLabelAlignment

<ejs-rangenavigator secondaryLabelAlignment='Far'>
</ejs-rangenavigator>|
|Skeleton of range navigator axis| Not Applicable|Property: skeleton

<ejs-rangenavigator skeleton=''>
</ejs-rangenavigator>|
|skeletontype of range navigator axis| Not Applicable|Property: skeletonType

<ejs-rangenavigator skeletonType=''>
</ejs-rangenavigator>|
|Theme of range navigator| Property: theme

<ej:RangeNavigator
theme=''>
</ej:RangeNavigator>|Property: theme

<ejs-rangenavigator theme=''>
</ejs-rangenavigator>|
|Default selector value range navigator| Property: selectedRangeSettings

this.selectedRangeSettings= {start:’’, end:’’};
<ej:RangeNavigator
[selectedRangeSettings]="selectedRangeSettings">
</ej:RangeNavigator>|Property: value

<ejs-rangenavigator value=[ 2, 10]>
</ejs-rangenavigator>|
|Value type of range navigator| Property: valueType

<ej:RangeNavigator
valueType='DateTime'>
</ej:RangeNavigator>|Property: valueType

<ejs-rangenavigator valueType='Logarithmic'>
</ejs-rangenavigator>|
|Width of range navigator| Property: size.width

<ej:RangeNavigator
size={ width: '200'}>
</ej:RangeNavigator>|Property: width

<ejs-rangenavigator width='400'>
</ejs-rangenavigator>|
|Height of range navigator| Property: size.height

<ej:RangeNavigator
size={ height: '200'}>
</ej:RangeNavigator>|Property: height

<ejs-rangenavigator height='400'>
</ejs-rangenavigator>|
|Series settings for range navigator| Property: seriesSettings

this.seriesSettings= { };
<ej:RangeNavigator
seriesSettings={seriesSettings}>
</ej:RangeNavigator>|Not Applicable|
|Range settings for range navigator| Property: rangeSettings

this.rangeSettings= { start: 3, end: 6 };
<ej:RangeNavigator
rangeSettings={rangeSettings}>
</ej:RangeNavigator>|Not Applicable|
|Scroll range settings for range navigator| Property: scrollRangeSettings

this.scrollRangeSettings= { start: 3, end: 6 };
<ej:RangeNavigator
scrollRangeSettings={scrollRangeSettings}>
</ej:RangeNavigator>|Not Applicable|

Series

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|animation| Property: enableAnimation

<ej:RangeNavigator
enableAnimation="true">
</ej:RangeNavigator>|Property: animation.enable

<ejs-rangenavigator [animation]='animation'>
</ejs-rangenavigator>
this.animation={ enable: true}|
|Border for range navigator series| Property: border

this.series = [{ border: { color: ‘transparent’, width: 2 } }];
<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>|Property: border

<e-rangenavigator-series
border={ color: 'pink', width: 2}>
</e-rangenavigator-series>|
|dataSource for range navigator| Property: series.dataSource

this.series = [{ dataSource: [{}] }];
<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>|Property: series.dataSource

<e-rangenavigator-series
dataSource={data}>
</e-rangenavigator-series>|
|query for data source of range navigator| Not Applicable|Property: query

<e-rangenavigator-series
dataSource={data} query=''>
</e-rangenavigator-series>|
|series type for range navigator| Property: series.type

this.series = [{ type: ‘’ }];
<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>|Property: series.type

<e-rangenavigator-series
type=''>
</e-rangenavigator-series>|
|series xName for range navigator| Property: series.xName

this.series = [{ xName: ‘’ }];
<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>|Property: series.xName

<e-rangenavigator-series
xName=''>
</e-rangenavigator-series>|
|series yName for range navigator| Property: series.yName

this.series = [{ yName: ‘’ }];
<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>|Property: series.yName

<e-rangenavigator-series
yName=''>
</e-rangenavigator-series>|
|series fill color for range navigator| Property: series.fill

this.series = [{ fill: ‘’ }];
<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>|Property: series.fill

<e-rangenavigator-series
fill=''>
</e-rangenavigator-series>|
|series width for range navigator| Property: series.width

this.series = [{ width: ‘2’ }];
<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>|Property: series.width

<e-rangenavigator-series
width=''>
</e-rangenavigator-series>|
|series dashArray for range navigator|Not Applicable|Property: series.dashArray

<e-rangenavigator-series
dashArray='10,5'>
</e-rangenavigator-series>|

StyleSettings

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Style settings of range navigator| Property: navigatorStyleSettings

this.navigatorStyleSettings = { leftThumbTemplate: ‘left’ };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Property: navigatorStyleSettings

<ejs-rangenavigator
[navigatorStyleSettings]='navigatorStyleSettings'
</ejs-rangenavigator>
this.navigatorStyleSettings = { leftThumbTemplate: ‘left’ };|
|Selected region color of range navigator| Property: selectedRegionColor

this.navigatorStyleSettings = { selectedRegionColor: ‘red’ };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Property: selectedRegionColor

<ejs-rangenavigator
[navigatorStyleSettings]='navigatorStyleSettings'
</ejs-rangenavigator>
this.navigatorStyleSettings = { selectedRegionColor: ‘red’ };|
|UnSelected region color of range navigator| Property: unselectedRegionColor

this.navigatorStyleSettings = { unselectedRegionColor: ‘red’ };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Property: unselectedRegionColor

<ejs-rangenavigator
[navigatorStyleSettings]='navigatorStyleSettings'
</ejs-rangenavigator>
this.navigatorStyleSettings = { unselectedRegionColor: ‘red’ };|
|Thumb color of range navigator| Property: thumbColor

this.navigatorStyleSettings = { thumbColor: ‘red’ };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Property: thumbSettings

<ejs-rangenavigator
[navigatorStyleSettings]='navigatorStyleSettings' }
</ejs-rangenavigator>
this.navigatorStyleSettings = {thumbSettings: ‘red’};|
|Selected region opacity of range navigator| Property: selectedRegionOpacity

this.navigatorStyleSettings = { selectedRegionOpacity: 0.4 };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Not Applicable|
|Unselected region opacity of range navigator| Property: UnselectedRegionOpacity

this.navigatorStyleSettings = { UnselectedRegionOpacity: 0.4 };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Not Applicable|
|Background for thumb| Property: background

this.navigatorStyleSettings = { background: ‘red’ };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Not Applicable|
|border for thumb| Property: border

this.navigatorStyleSettings = { border: { color: ‘red’, width: 2} };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Not Applicable|
|Highlightsettings for range navigator| Property: highlightSettings

this.navigatorStyleSettings = { highlightSettings: { } };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Not Applicable|
|Selected style settings for range navigator| Property: selectionSettings

this.navigatorStyleSettings = { selectionSettings: { } };
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Not Applicable|
|Left thumb template for range navigator| Property: leftThumbTemplate

this.navigatorStyleSettings = { leftThumbTemplate: ‘’};
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Not Applicable|
|Right thumb template for range navigator| Property: rightThumbTemplate

this.navigatorStyleSettings = { rightThumbTemplate: ‘’};
<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>|Not Applicable|

Tooltip

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|tooltip| Property: visible

this.tooltipSettings = { visible: true};
<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>|Property: enable

<ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { enable: true }|
|background color of tooltip| Property: backgroundColor

this.tooltipSettings = { backgroundColor: ‘red’};
<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>|Property: fill

<ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { fill: ‘pink’ }|
|Font style of tooltip| Property: font

this.tooltipSettings = { font: ‘red’};
<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>|Property: textStyle

<ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { textStyle: ‘pink’ }|
|Label format of tooltip| Property: labelFormat

this.tooltipSettings = {labelFormat: ‘yMd’};
<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>|Property: format

<ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { format: ‘yMd’}|
|Display mode of tooltip| Property: tooltipDisplayMode

this.tooltipSettings = { tooltipDisplayMode: ‘always’};
<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>|Property: displayMode

<ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { displayMode: ‘Always’ }|
|Template of tooltip| Not Applicable|Property: template

<ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { template: ‘<div>Chart</div>’ }|
|Border of tooltip|Not Applicable|Property: border

<ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { border: { color: ‘red’, width: 2} }|
|Border of tooltip|Not Applicable|Property: opacity

<ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { opacity: 0.5 }|

Period Selector

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|period Selector position|Not Applicable|Property: periodSelectorSettings.position

<ejs-rangenavigator
[periodSelectorSettings]='periodsValue'
</ejs-rangenavigator>
this.periodsValue = { }|

Methods

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Print|Not Applicable|Property: print()


<ejs-rangenavigator
#range id="range"
</ejs-rangenavigator>
print(){
this.RangeObj.print();}|
|Export|Not Applicable|Property: export()


<ejs-rangenavigator
#range id="range"
</ejs-rangenavigator>
export(){
this.RangeObj.export(‘PNG’, ‘result’, null, [this.RangeObj]);}|

Events

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Fires before loading the RangeNavigator.| Property: load

<ej:RangeNavigator
(load)="load($event)">
</ej:RangeNavigator>
load(sender){ };|Property: load

<ejs-rangenavigator
load={this.load.bind(this)}
</ejs-rangenavigator>
public load(): void { };|
|Fires before loading the RangeNavigator.| Property: loaded

<ej:RangeNavigator
(loaded)="onLoaded($event)">
</ej:RangeNavigator>
loaded(sender){ };|Property: loaded

<ejs-rangenavigator
loaded={this.loaded.bind(this)}
</ejs-rangenavigator>
public loaded(): void { };|
|Fires when the value changes in range navigator| Property: rangeChanged

<ej:RangeNavigator
(rangeChanged)="onRangeChanged($event)">
</ej:RangeNavigator>
onRangeChanged(sender){ };|Property: changed

<ejs-rangenavigator
changed={this.changed.bind(this)}
</ejs-rangenavigator>
public changed(): void { };|
|Fires after the RangeNavigator|Not Applicable|Property: resized

<ejs-rangenavigator
resized={this.resized.bind(this)}
</ejs-rangenavigator>
public resized(): void { };|
|Fires before tooltip in RangeNavigator|Not Applicable|Property: tooltipRender

<ejs-rangenavigator
tooltipRender={this.tooltipRender.bind(this)}
</ejs-rangenavigator>
public tooltipRender(): void { };|
|Fires before period render in the RangeNavigator|Not Applicable|Property: selectorRender

<ejs-rangenavigator
selectorRender={this.selectorRender.bind(this)}
</ejs-rangenavigator>
public selectorRender(): void { };|
|Fires when scrollStart the RangeNavigator|Property: scrollStart

<ej:RangeNavigator
(scrollStart)="onScrollStart($event)">
</ej:RangeNavigator>
onScrollStart(sender){ };|Not Applicable|
|Fires when scrollEnd the RangeNavigator|Property: scrollEnd

<ej:RangeNavigator
(scrollEnd)="onScrollEnd($event)">
</ej:RangeNavigator>
onScrollEnd(sender){ };|Not Applicable|
|Fires when selected range Start the RangeNavigator|Property: selectedRangeStart

<ej:RangeNavigator
(selectedRangeStart)="onSelectedRangeStart($event)">
</ej:RangeNavigator>
onSelectedRangeStart(sender)(){ };|Not Applicable|
|Fires when selected range ends the RangeNavigator|Property: selectedRangeEnd

<ej:RangeNavigator
(selectedRangeEnd)="onSelectedRangeEnd($event)">
</ej:RangeNavigator>
onSelectedRangeEnd(sender)(){ };|Not Applicable|
|Fires when scroll range changed in the RangeNavigator|Property: scrollChanged

<ej:RangeNavigator
(scrollChanged)="onScrollChanged($event)">
</ej:RangeNavigator>
onScrollChanged(){ };|Not Applicable|
|Fires when click in the RangeNavigator|Property: click

<ej:RangeNavigator
(click)="onClick($event)">
</ej:RangeNavigator>
onClick(){ };|Not Applicable|
|Fires when right click in the RangeNavigator|Property: rightClick

<ej:RangeNavigator
(rightClick)="onRightClick($event)">
</ej:RangeNavigator>
onRightClick(){ };|Not Applicable|
|Fires when double click in the RangeNavigator|Property: doubleClick

<ej:RangeNavigator
(doubleClick)="onDoubleClick($event)">
</ej:RangeNavigator>
onDoubleClick(){ };|Not Applicable|