How to get started easily with Syncfusion Angular7 Linear Gauge?

The Essential JS 2 Linear Gauge is used to visually represent a value within a range of values. This value can vary dynamically during presentation and enabling animation effects. Its feature sets include features such as pointer, axes, ranges, and annotations. This KB article explains how to easily integrate Syncfusion Angular Linear Gauge in Angular 7 Application and how to enable its commonly used features using services.

Prerequisites

Before starting, you need the following items to create Angular Linear Gauge in Angular 7 application:

• Node.js (latest version)
• Angular
• Angular CLI
• Visual studio code for editor.

Installation and application creation

1. Install Angular CLI using the following command.
   

   npm install -g @angular/cli@7.0.5

2. Create an Angular7 application using Angular CLI.
   

   npm new angular7-app

   cd angular7-app

3. Serve the Angular 7 using the following command.
   

   ng serve

Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 7 version.

Integration of Angular Linear Gauge

4. After running the Angular 7 application successfully, configure the Angular Linear Gauge in this application. Install Angular Linear Gauge and EJ2 package using the following command. The –save command instructs the NPM to include the Linear Gauge package inside the dependencies section of the package.json.

5. Import Lineargauge module from the installed package in app/app.module.ts.

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { LinerGaugeModule } from '@syncfusion/ej2-angular-lineargauge;
   import { AppComponent } from './app.component';
    
   @NgModule({
        declarations: [
       AppComponent
        ],
        imports: [
     BrowserModule,
     LinearGaugeModule
        ],
        providers: [],
        bootstrap: [AppComponent]
   })
   export class AppModule { }
   

6. Refer to the css file for Angular Linear Gauge in style.css.

    
   Import “../node_modules/@syncfusion/ej2/material.css”
    
   

7. Add the Angular Linear Gauge component in app.component.html.

   <ejs-lineargauge></ejs-lineargauge>
   

8. Now add the axes, major ticks, minor ticks, and pointer in app.component.ts.

    
   public Axes: Object[] = [{
       pointers: [{
           value: 10,
           height: 15,
           width: 15,
           placement: 'Near',
           offset: -50,
           markerType: 'Triangle'
       }],
       majorTicks: {
           color: '#9E9E9E',
           interval: 10
       },
       minorTicks: {
          color: '#9E9E9E',
           interval: 2
       },
       labelStyle: {
         offset: 48
       }
   }];
    
   

9. After adding the properties, define the Linear Gauge properties in app.component.html.

   <ejs-lineargauge id='defaultContainer' style='display:block;'  style='display:block;' orientation='Horizontal' [annotations]='Annotation' [axes]='Axes'>
   </ejs-lineargauge>
   

10. Now, serve the application using the following command.

     
    ng serve –open
     
    

11. After all the files have been compiled successfully, it will serve the site at localhost:4200

The following screenshot illustrates this.

Summary

To know more about the Linear gauge, check our Angular Linear Gauge features from this page. If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!