Background:
When a user drags a gauge control, the control’s value gets updated for each tick that gets moved. Sometimes, you may only want to send an update to your back end when the user finishes dragging the gauge control. We can do that by tying a couple of events to the gauge control when it is initialized.
Steps to Complete:
1. Assign a method to the initialized event
2. Inside of the initialized method, tie methods to the mouseup and mouseleave events that will be used to update the back end
Getting Started
Assign a method to the initialized event
If we want to update the back end, we’re going to need to tie some events to the control so that we can tell how a user is interacting with it. We’ll do this inside of the initialized event of the gauge control.
<wj-linear-gauge #myGauge id="wjGauge" (initialized)="initialized(myGauge, $event)" [min]="0" [max]="10" [isReadOnly]="false"></wj-linear-gauge>Inside of the initialized method, tie methods to the mouseup and mouseleave events that will be used to update the back end
Next, we’ll need to tie some events to the control so that we know how the user is interacting with it. We use mouseup to determine when the user releases their mouse button so that we know when the user has finished editing, and we use mouseleave because the user is no longer over the gauge control, so mouseup will not be able to register when the user releases the mouse.
initialized(s, e){
this.myGauge.hostElement.addEventListener('mouseup', function(e) {
console.log('MouseUp');
});
this.myGauge.hostElement.addEventListener('mouseleave', function(e) {
console.log('MouseLeave');
});
}Inside of these events, you’ll be able to send the update to your back end. Now, instead of sending an update to the back end for each tick that the user moves the gauge, you’ll be able to do it once, when they finish editing.
You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-angular-gauge-update-value-once
Joel Parks