Within my application, I have a requirement to deactivate a button when no changes have been made to a specific group. Each group comprises various locations and a boolean value for returnHome. Additionally, I possess the original arrangement of locations along with the initial setting for the returnHome toggle. The integration of these components is as follows:
HTML for the ReturnHome Toggle Slider:
<mat-slide-toggle [(ngModel)]="returnHome" (change)="onToggleReturnHome(returnHome)"></mat-slide-toggle>
Button HTML:
<button id="save-locations" mat-raised-button color="primary"
[disabled]="hasGroupChanged()">
Save Group
</button>
Function for Checking Changes in the Group:
hasGroupChanged() {
// Detecting change in returnHome toggle
if(this.returnHome != this.originalReturnHome) {
return true;
}
// Code to determine if there are modifications to the group's locations
// ...
}
Subsequently, upon toggling the slider, I expect an update to the returnHome variable, triggering the hasGroupChanged() function through the [disabled] property, which should recognize that returnHome has diverged from its original state (originalReturnHome), resulting in the disabling of the button.
Nevertheless, upon placing breakpoints within the onToggleReturnHome() and hasGroupChanged() functions, it appears that hasGroupChanged() executes prior to acknowledging the modification to returnHome, hence preventing the button from being enabled following the toggle action.
Is there a way to ensure that onToggleReturnHome() is executed before hasGroupChanged()? Is such a sequence feasible within the Angular execution flow? If not, how can I guarantee proper enabling/disabling functionality for the button?