Post
Ask Question

ngx-gauge In Angular

Step 1
 
First, we create an Angular project using Angular cli.
 
ng new demo --skip-tests --spec false
--skip-tests command is for removing test projects
--spec false command is for skip test file generation
  
 
Step 2
 
Install Gauge module in our project.
 
npm install ngx-gauge --save
 
--save command is for adding external property.
 
 
Step 3
 
Import the NgxGaugeModule in our app.module.ts
  1. import { NgxGaugeModule } from 'ngx-gauge';  
  2.   
  3. @NgModule({  
  4.   imports: [  
  5.      NgxGaugeModule  
  6.   ],  
  7. })  
Step 4
 
We need to configure gauge and put ngx-gauge component in app.component.html.
  1. <ngx-gauge [type]="gaugeType" [value]="gaugeValue" [label]="gaugeLabel" [append]="gaugeAppendText"></ngx-gauge>
Step 5
 
Add Property inside App component
  1. export class AppComponent {  
  2.    gaugeType = "semi"; //full, arch  
  3.    gaugeValue = 28.3;  
  4.    gaugeLabel = "Speed";  
  5.    gaugeAppendText = "km/hr";  
  6. }  
Step 6
 
Run your application
 
ng serve -o
 
 
Source Code
 
 
Conclusion
 
Thanks a lot for reading. I hope you liked this article. Please share your suggestions and feedback.