Getting started with Angular Circular gauge component

9 Feb 20265 minutes to read

This article describes the steps to create a simple Circular Gauge and demonstrates its basic usage.

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

Installing Syncfusion® Circular Gauge package

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

1. Ivy library distribution package format
2. Angular compatibility compiler (ngcc) package for legacy compilation and rendering

Ivy library distribution package

Syncfusion® Angular packages (>= 20.2.36) use the Ivy distribution to support the Angular Ivy rendering engine. These packages are compatible with Angular version 21 and other latest angular versions. Install the Ivy package with the following command:

Add @syncfusion/ej2-angular-circulargauge to the application:

npm install @syncfusion/ej2-angular-circulargauge --save

Angular compatibility compiled package (ngcc)

For Angular versions earlier than 12, use the legacy ngcc package of the Syncfusion® Angular components. Install the ngcc package with:

Add @syncfusion/ej2-angular-circulargauge@ngcc to the application:

npm install @syncfusion/ej2-angular-circulargauge@ngcc --save

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

@syncfusion/ej2-angular-circulargauge:"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 Circular Gauge component

Register and render the Circular Gauge component in the application root component. Update app.component.ts to include the ej2-angular-circulargauge module and render the control as shown in the sample below (src/app/app.component.ts).

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
imports: [
         CircularGaugeModule
    ],
    providers: [ GaugeTooltipService ],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the Charts component
    template: `<ejs-circulargauge id='circular-container'></ejs-circulargauge>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent  { }

Replace the default root element in index.html with the component selector:

<app-container></app-container>

Run the application using the Angular development server. If the project provides an npm start script, that command may be used; otherwise run the development server directly:

ng serve --open

The following example shows a basic Circular Gauge.

app.component.ts

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



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

@Component({
imports: [
         CircularGaugeModule
    ],

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

}

main.ts

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

Set Pointer Value

Set a pointer value using the value property on a pointer. See the pointer API reference for details: value in pointers.

app.component.ts

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




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

@Component({
imports: [
         CircularGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-circulargauge id="circular-container">
        <e-axes>
            <e-axis>
                <e-pointers>
                    <e-pointer value=35></e-pointer>
                </e-pointers>
            </e-axis>
        </e-axes>
    </ejs-circulargauge>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        // Initialize objects.
    }

}

main.ts

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