Getting started with Angular Linear gauge component

This section explains the steps required to create a simple Linear Gauge and demonstrate the basic usage of the Linear Gauge component.

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-lineargauge versions.

You also need a modern code editor such as Visual Studio Code, Cursor, or Syncfusion® CodeStudio.

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.

Dependencies

Below is the list of minimum dependencies required to use the Linear Gauge component.

|-- @syncfusion/ej2-angular-lineargauge
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-angular-lineargauge
    |-- @syncfusion/ej2-lineargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-svg-base

Setup Angular Environment

Prerequisites: Node.js (LTS) and npm must be installed before creating an Angular project.

Use the Angular CLI to create and manage Angular applications. Install the CLI with one of the following approaches depending on preference.

npm install -g @angular/cli

Create an Angular Application

Create a new Angular application with the Angular CLI:

ng new my-app
cd my-app

Install the Syncfusion® Linear Gauge package

Syncfusion® packages are published on npm under the @syncfusion scope. Angular distributions are available in two package formats:

  1. Ivy library distribution package (recommended)
  2. Angular compatibility compiler (ngcc) package (legacy)

Ivy library distribution package

From package version 20.2.36 onwards, the Syncfusion® Angular components are published as Ivy partial-compilation packages and are compatible with Angular 13 and later, including the latest Angular versions (such as Angular 21).

Install the @syncfusion/ej2-angular-lineargauge package using the following command.

npm install @syncfusion/ej2-angular-lineargauge

Angular compatibility compiled package (ngcc)

Use the legacy @ngcc-tagged package only for projects that still rely on the Angular View Engine (typically Angular 12 and earlier). Angular 13 and later do not require ngcc.

Install the @syncfusion/ej2-angular-lineargauge@ngcc package using the following command.

npm install @syncfusion/ej2-angular-lineargauge@ngcc

To reference the ngcc package in package.json, add the -ngcc suffix to the package version, for example:

"@syncfusion/ej2-angular-lineargauge": "32.1.19-ngcc"

Note: If the -ngcc suffix is not specified, the Ivy package will be installed and a compatibility warning may appear when using older Angular versions.

Add the Linear Gauge component

  1. Open src/app/app.component.ts and replace its contents with the following code to render the Linear Gauge component.
import { Component } from '@angular/core';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';

@Component({
    imports: [LinearGaugeModule],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the Linear Gauge component
    template: `<ejs-lineargauge id="gauge-container"></ejs-lineargauge>`
})
export class AppComponent { }

  1. Replace the default selector in src/index.html so the new standalone component is bootstrapped.

     <app-container></app-container>

  2. Run the application in the browser with the following command.

     npm start

By default, the dev server opens at http://localhost:4200/.

The following example renders a basic Linear Gauge.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge'



import { Component } from '@angular/core';

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    // specifies the template string for the linear gauge component
    template: `<ejs-lineargauge id="gauge-container"></ejs-lineargauge>`
})
export class AppComponent {

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

Module Injection

The Linear Gauge component is segregated into individual feature-wise services. To use a particular feature, register the matching service in the providers array of the component as shown below.

  • AnnotationsService – Required to use the Annotation feature.
  • GaugeTooltipService – Required to use the Tooltip feature.

Inject the services you need in the providers section of the app.component.ts file as shown below.

The following example demonstrates injecting GaugeTooltipService to enable the tooltip on the Circular Gauge:

import { Component } from '@angular/core';
import {
    LinearGaugeModule,
    GaugeTooltipService
} from '@syncfusion/ej2-angular-lineargauge';

@Component({
    imports: [LinearGaugeModule],
    standalone: true,
    selector: 'app-container',
    providers: [GaugeTooltipService],
    template: `<ejs-lineargauge id="gauge-container" [tooltip]="tooltip"></ejs-lineargauge>`
})
export class AppComponent {
    public tooltip?: Object;
    ngOnInit(): void {
        this.tooltip = {
            enable: true
        };
    }
 }

Note: Inject only the services required for the features you use. Injecting all services is not required and can increase the bundle size slightly.

Troubleshooting

  • Feature not working (annotations, tooltip) - Ensure the matching service (AnnotationsService, GaugeTooltipService) is registered in the providers array of the host component.
  • Can't bind to 'minimum' or ejs-lineargauge is not a known element - Make sure LinearGaugeModule is imported in the imports array of every standalone component that uses the gauge.
  • npm start does not work - Run npx ng serve instead, or use npm run start.
  • Compatibility warning about ngcc on Angular 12 or earlier - Install the legacy package: npm install @syncfusion/ej2-angular-lineargauge@ngcc.

See also