Getting Started with Angular Range Navigator Component

This section explains the steps required to create a simple Angular Range Navigator and demonstrates the basic usage of the Range Navigator component.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Ready to streamline your Syncfusion® Angular development? Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant

Prerequisites

Before getting started, ensure that your environment meets the system requirements for Syncfusion® Angular UI components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-charts versions.

Set Up the Angular Application

A straightforward approach to begin with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Verify the installation:

ng version

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app
  • This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

  • Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

Note: In Angular 19 and below, the CLI generates files like app.component.ts, app.component.html, app.component.css, etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding Syncfusion® Angular packages

Syncfusion®’s Angular component packages are available on npmjs.com. To use Syncfusion® Angular components, install the necessary package.

This guide uses the Angular Range Navigator component for demonstration. Add the Angular Chart package with:

ng add @syncfusion/ej2-angular-charts

The above command will perform the following configurations:

  • Add the @syncfusion/ej2-angular-charts package and peer dependencies to your package.json.
  • Import the Range Navigator component in your application.

For more details on version compatibility, refer to the Version Compatibility section.

Ivy library distribution package

Syncfusion®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute:

ng add @syncfusion/ej2-angular-charts

Angular compatibility compiled package (ngcc)

For applications not compiled with Ivy, use the ngcc tagged packages:

npm install @syncfusion/[email protected]

Note: The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of Ivy compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.

Add the Range Navigator Component

Update src/app/app.component.ts (or src/app/app.ts in Angular 20+) to render the Range Navigator component:

import { Component, ViewEncapsulation } from '@angular/core';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [ChartModule, RangeNavigatorModule],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the RangeNavigator component
    template: `<ejs-rangenavigator id="rn-container"></ejs-rangenavigator>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

Note: ChartModule provides the series types used by the Range Navigator. Without ChartModule, series such as AreaSeries will not be available.

The app-root selector matches the root element in src/index.html, which is the default generated by Angular CLI.

Use the ng serve command to run the application in the browser:

ng serve

Verify that an empty Range Navigator renders before proceeding to the next step.

Module Injection

Range Navigator features are exposed through individual services. To use a particular feature, inject its service in the app.component.ts providers array. The following services extend the Range Navigator’s basic functionality:

  • AreaSeriesService — Inject this service to enable the area series.
  • DateTimeService — Inject this service to enable the date-time axis.
  • RangeTooltipService — Inject this service to show the tooltip.

Update src/app/app.component.ts to import the services and add them to the providers array of the component:

import { Component, ViewEncapsulation } from '@angular/core';
import { ChartModule, RangeNavigatorModule, AreaSeriesService, DateTimeService, RangeTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [ChartModule, RangeNavigatorModule],
    standalone: true,
    selector: 'app-root',
    providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
    template: `<ejs-rangenavigator id="rn-container"></ejs-rangenavigator>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

Populate Range Navigator with data

Add a series object to the Range Navigator by using the series property. Map the JSON fields x and y to the series xName and yName properties, and set the JSON array as the dataSource property.

Since the JSON contains category data, set the valueType for the horizontal axis (primaryXAxis) to DateTime. By default, the axis valueType is Numeric.

import { Component, OnInit } from '@angular/core';
import { ChartModule, RangeNavigatorModule, AreaSeriesService, DateTimeService } from '@syncfusion/ej2-angular-charts';
import { datasrc } from './datasource';

@Component({
    imports: [ChartModule, RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value'>
        <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>`
})
export class AppComponent implements OnInit {
    public value?: Object[];
    public chartData?: Object[];

    ngOnInit(): void {
        this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
        this.chartData = datasrc;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: Get data from here.

The sample should look like our default, don’t worry about the gradient color, let it take the default color.

Troubleshooting

If the Range Navigator does not render as expected, check for these common issues:

  • “No provider for AreaSeriesService” error: Confirm that the relevant Service is added to the component’s providers array. Each feature requires its corresponding service.
  • Date axis not displaying correctly: Confirm that primaryXAxis.valueType is set to DateTime and that the x field in your data source is a valid Date object.
  • Data not displayed: Check that the xName and yName values match the field names in your data source exactly, and that the dataSource is assigned before the chart renders.
  • Build errors: Run ng version to confirm that Node.js, Angular CLI, and @syncfusion/ej2-angular-charts are on supported versions, and check the terminal output for the specific error.
  • Port already in use: If ng serve fails because port 4200 is in use, run ng serve --port 4201 (or another free port) instead.

See also