angular: enable button when asynchronous call returns

Question

probably an easy one: I got a button defined like this

<button mat-raised-button color="accent" class="reserve" [disabled]="buttonIsDisabled()"

where buttonIsDisabled is defined as

buttonIsDisabled() {
  return !(this.data_privacy && this.captcha.length > 0);
}

this.captcha is a string that is receiving its value through some async call.

In this setup the button is only enabled after the next click on the screen as the function is being reevaluated. Is there a way to enable button once the value for this.captcha is set?

question from:https://stackoverflow.com/questions/65642504/angular-enable-button-when-asynchronous-call-returns

Answer 1

The reason is the angular change detection strategy must be on push in @component meta data. So, whenever any value gets updated in the component you need to run it using ChangeDetectorRef service

import { ChangeDetectorRef } from '@angular/core';
...
...
...
constructor(private ref:ChangeDetectorRef)

on ref instance you will get detectchanges();

Also, If you want to use angular default change detection

@Component({
    selector: 'newsletter',
    changeDetection: ChangeDetectionStrategy.OnPush, <--- change this to Default
    template: `...`
})