Search results

Range in Angular Range Navigator component

The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways you can select a range.

  • By dragging the thumbs.
  • By tapping on the labels.
  • By setting the start and end through value properties.

Following code example shows how to configure the selected range using value property of RangeNavigator.

import { Component, OnInit } from '@angular/core';
import { datasrc } from 'datasource.ts'

    selector: 'app-container',
    `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [tooltip]='tooltip'
                <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
export class AppComponent implements OnInit {
    public value: Object[];
    public chartData: Object[];
    public tooltip: Object[];
    public labelFormat: string;
    ngOnInit(): void {
        this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
        this.chartData = datasrc;
        this.tooltip = { enable: true, displayMode: 'Always' };
        this.labelFormat = 'MMM-yy';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, DateTimeService, RangeTooltipService} from '@syncfusion/ej2-angular-charts';

 * Module
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, DateTimeService, RangeTooltipService ]
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';