How to update the pointer value using with two binding in JavaScript Circular Gauge?

You can update the pointer value by two-way binding in JavaScript Circular Gauge. One of the core features of AngularJS is its popular two-way data binding. In two-way data binding, any change made to the model is immediately reflected in the View, and any changes made in the View updates the model.

The following steps explain how to update the pointer value using two-way binding.

Step 1: Create a simple circular gauge, enable the pointer drag options, and then create an HTML input element to change the pointer value by changing the input value.

Edit gauge value:           <input class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched">
 
<ej-circulargauge e-value ="vm.testGagueValue" 
                  e-readonly="false">
 </ej-circulargauge>

Step 2: Use the ng-model property to display the value of HTML control using testGagueValue. If you change value in Textbox, the model will be updated, or if you change the value of model, the View will be updated immediately.

Edit gauge value: 
 
<input ng-model="vm.testGagueValue" 
class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched">
 
<ej-circulargauge e-value ="vm.testGagueValue" 
                  e-readonly="false">
 </ej-circulargauge>

The following screenshot illustrates the result of two-way binding to update the pointer value.

Circular gauge before changing the model:

Circular gauge after changing the model:

Sample link: https://jsplayground.syncfusion.com/lhp35ejt

Conclusion

I hope you enjoyed learning about how to update the pointer value using with two binding in JavaScript Circular Gauge.

You can refer to our JavaScript Circular Gauge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Circular Gauge example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!