This section explains you the steps required to create a simple circular gauge and demonstrate the basic usage of circular gauge control.
You can use Angular CLI
to setup your Angular applications.
To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install Circular Gauge component, use the following command.
npm install @syncfusion/ej2-angular-circulargauge --save
The —save will instruct NPM to include the circular gauge package inside of the
dependencies
section of thepackage.json
.
Import Circular Gauge module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-circulargauge
[src/app/app.module.ts].
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the CircularGaugeModule for the Circular Gauge component
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
import { AppComponent } from './app.component';
@NgModule({
//declaration of ChartModule into NgModule
imports: [ BrowserModule, CircularGaugeModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
file to render the ej2-angular-circulargauge
component
[src/app/app.component.ts]
.import { Component, ViewEncapsulation } from '@angular/core';
@Component({
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 { }
Now use the app-container
in the index.html instead of default one.
<app-container></app-container>
npm start
The below example shows a basic Circular Gauge.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
// specifies the template string for the CircularGauge component
template: `<ejs-circulargauge id="circular-container"></ejs-circulargauge>`
})
export class AppComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, CircularGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Pointer value is used to indicate the gauge value using value
property in pointers
.
import { Component, OnInit } from '@angular/core';
@Component({
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
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, CircularGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);