Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in Angular Range Navigator component

21 Oct 2021 / 7 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: ’
Chart
’ }
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
Previous
Next