Getting started with Angular Linear gauge component
11 Jul 202412 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.
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
Angular CLI
can be used to setup the Angular applications. To install Angular CLI use the following command.
npm install -g @angular/cli
Create an Angular Application
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
Installing Syncfusion Linear Gauge package
Syncfusion packages are distributed in npm as @syncfusion
scoped packages. You can get all the Angular Syncfusion package from npm link.
Currently, Syncfusion provides two types of package structures for Angular components,
- Ivy library distribution package format
- Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
Ivy library distribution package
Syncfusion Angular packages(>=20.2.36
) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
Add @syncfusion/ej2-angular-lineargauge
package to the application.
npm install @syncfusion/ej2-angular-lineargauge --save
Angular compatibility compiled package(ngcc)
For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc
package use the below.
Add @syncfusion/ej2-angular-lineargauge@ngcc
package to the application.
npm install @syncfusion/ej2-angular-lineargauge@ngcc --save
To mention the ngcc package in the package.json
file, add the suffix -ngcc
with the package version as below.
@syncfusion/ej2-angular-lineargauge:"20.2.38-ngcc"
Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.
Add LinearGauge component
Modify the template in app.component.ts file to render the Linear Gauge component.
[src/app/app.component.ts]
.
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { Component } from '@angular/core';
@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 {
}
Now use the <code>app-container</code>
in the index.html instead of default one.
```
<app-container></app-container>
```
-
Now run the application in the browser using the below command.
npm start
The below example shows 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
LinearGauge component is segregated into the individual feature-wise modules. In order to use a particular feature, inject its feature module using the providers: {}
. Please find the feature module name and description as follows.
-
AnnotationsService
- Inject this provider to use Annotation feature. -
GaugeTooltipService
- Inject this provider to use Tooltip feature.
These modules should be injected in the providers section of the app.component.ts file as follows,
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { Component } from '@angular/core';
import { AnnotationsService, GaugeTooltipService} from '@syncfusion/ej2-angular-lineargauge';
@Component({
imports: [
LinearGaugeModule,
],
standalone: true,
providers: [ AnnotationsService, GaugeTooltipService ]
})
Add Gauge Title
The title can be added to the Linear Gauge component using the title
property in the 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, OnInit } from '@angular/core';
@Component({
imports: [
LinearGaugeModule
],
providers: [ GaugeTooltipService ],
standalone: true,
selector: 'app-container',
template:
`<ejs-lineargauge id="gauge-container" [title]='Title'>
</ejs-lineargauge>`
})
export class AppComponent implements OnInit {
public Title?: string;
ngOnInit(): void {
// Title for linear gauge
this.Title = 'linear gauge';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Axis Range
The range of the axis can be set using the minimum
and maximum
properties in the 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, OnInit } from '@angular/core';
@Component({
imports: [
LinearGaugeModule
],
providers: [ GaugeTooltipService ],
standalone: true,
selector: 'app-container',
template:
`<ejs-lineargauge id="gauge-container">
<e-axes>
<e-axis [minimum]='Minimum' [maximum]='Maximum'>
</e-axis>
</e-axes>
</ejs-lineargauge>`
})
export class AppComponent implements OnInit {
public Minimum?: number;
public Maximum?: number;
ngOnInit(): void {
this.Minimum = 0,
this.Maximum = 200
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
To denote the axis labels with temperature units, add the °C as suffix to each label. This can be achieved by setting the {value}°C to the format
property in the labelStyle
object of the axis. Here, {value} acts as a placeholder for each axis label.
To change the pointer value from the default value of the gauge, set the value
property in pointers
object of the axis.
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, OnInit } from '@angular/core';
@Component({
imports: [
LinearGaugeModule
],
providers: [ GaugeTooltipService ],
standalone: true,
selector: 'app-container',
template:
`<ejs-lineargauge id="gauge-container">
<e-axes>
<e-axis minimum=0 maximum=200>
<e-pointers>
<e-pointer value=140></e-pointer>
</e-pointers>
<e-ranges>
<e-range start=0 end=80 startWidth=15 endWidth=15></e-range>
<e-range start=80 end=120 startWidth=15 endWidth=15></e-range>
<e-range start=120 end=140 startWidth=15 endWidth=15></e-range>
<e-range start=140 end=200 startWidth=15 endWidth=15></e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-lineargauge>`
})
export class AppComponent implements OnInit {
public Label?: Object;
ngOnInit(): void {
this.Label = {
format: '{value}°C'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Setting the value of pointer
The pointer value is changed in the below sample using the value
property in pointers
object of the axis.
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, OnInit } from '@angular/core';
@Component({
imports: [
LinearGaugeModule
],
providers: [ GaugeTooltipService ],
standalone: true,
selector: 'app-container',
template:
`<ejs-lineargauge id="gauge-container">
<e-axes>
<e-axis minimum=0 maximum=200>
<e-pointers>
<e-pointer value=40 color='green'></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-lineargauge>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));