Getting started with Angular Linear gauge component

30 Jul 20266 minutes to read

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.

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-lineargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-svg-base

Setup 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 an Angular application

With Angular CLI installed, execute this command to generate a new application. When prompted, accept the default options unless you have a specific reason to change them.

ng new syncfusion-angular-app
  • This command prompts you to configure settings like enabling Angular routing and choosing a stylesheet format. Accept the defaults (no routing, CSS) to follow this guide.
? 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.

Server-side rendering prompt

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

AI tool selection prompt

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

In Angular 19 and below, the CLI generates files named app.component.ts, app.component.html, app.component.css, and so on. In Angular 20+, the structure is simpler: src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding the Syncfusion® Angular Linear Gauge package

To install the Syncfusion® Angular Linear Gauge package, use the following command:

ng add @syncfusion/ej2-angular-lineargauge

The ng add command installs the package, registers it in package.json, and configures the required entries in your workspace automatically.

If ng add is unavailable in your setup, install the package manually with:

npm install @syncfusion/ej2-angular-lineargauge

Add Syncfusion® Angular Linear Gauge component

Open src/app/app.component.ts (Angular 19 and below) or src/app/app.ts (Angular 20+) and replace its contents with the following 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-root',
    // specifies the template string for the Linear Gauge component
    template: `<ejs-lineargauge id="gauge-container"></ejs-lineargauge>`
})
export class AppComponent { }

Module Injection

The Linear Gauge component is divided into individual feature-based modules. To use a specific feature, you must inject its service provider. For standalone components, register services in the providers array of the component. This example uses the tooltip feature of the Linear Gauge component.

  • GaugeTooltipService – Inject this provider to use tooltip feature.

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

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

@Component({
    imports: [LinearGaugeModule],
    standalone: true,
    selector: 'app-root',
    providers: [GaugeTooltipService],
    template: `<ejs-lineargauge id="gauge-container" style='display:block;' [tooltip]="tooltip">
                <e-axes>
                    <e-axis>
                        <e-pointers>
                            <e-pointer value=50></e-pointer>
                        </e-pointers>
                    </e-axis>
                </e-axes>
            </ejs-lineargauge>`
})
export class AppComponent {
   public tooltip: Object = {
        enable: true
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Run the application

Run the following command to launch the development server and open the application in your default browser:

npm start

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