My Angular 2 form is set up to send data to the server asynchronously. I want to provide users with visual feedback during the waiting period by changing the blue 'submit' button to a greyed-out 'Please wait...' button. To achieve this, I thought of using two buttons and toggling their visibility.
I initially tried adding this to my model:
isPending: boolean = false;
And then including this in my HTML page:
<button [hidden]="!isPending" type="submit" class="btn btn-primary">Register</button>
<button [hidden]="isPending" class="btn btn-primary" disabled>Please wait...</button>
However, both buttons always remain visible, regardless of the isPending value set.
Is there a more conventional way to achieve the desired outcome?