Selecting range in Angular Range navigator component

27 Apr 20244 minutes to read

The Range Selector’s left and right thumbs are used to indicate the selected range in the large collection of data. A range can be selected in the following ways:

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

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { AreaSeriesService, DateTimeService, RangeTooltipService} from '@syncfusion/ej2-angular-charts'




import { Component, OnInit, ViewChild } from '@angular/core';
import { datasrc } from './datasource';
import {
    DateTime, AreaSeries, IChangedEventArgs, Chart
} from '@syncfusion/ej2-charts';

@Component({
imports: [
         ChartModule, RangeNavigatorModule
    ],

providers: [ AreaSeriesService, DateTimeService, RangeTooltipService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [tooltip]='tooltip'
    [labelFormat]='labelFormat' (changed)='changed($event)'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>
        <div align="center">
    <ejs-chart #chart style='display:block;' id='chart' [primaryXAxis]='primaryXAxis'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' width='2'>
            </e-series>
        </e-series-collection>
        </ejs-chart>
    </div>`
})
export class AppComponent implements OnInit {
    public value?: Object[];
    public chartData?: Object[];
    public tooltip?: Object[];
    public labelFormat?: string;
    public primaryXAxis?: Object;
    @ViewChild('chart')
    public Chart?: Chart;
    public changed(args: IChangedEventArgs): void {
        (this.Chart as Chart).primaryXAxis.zoomFactor = args.zoomFactor;
        (this.Chart as Chart).primaryXAxis.zoomPosition = args.zoomPosition;
        (this.Chart as Chart).dataBind();
    }
    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';
        this.primaryXAxis = {
          valueType: 'DateTime',
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));