How to disable button on form for a particular time based on success of modal button?

Question

Here is the component.html code for Button that needs to be disabled on success response of the modal:

<button title="Bypass Authentication" (click) = "opendobAuthModal(user.id)">Bypass Authentication</button>

And the component.ts file where function is defined:

opendobAuthModal(userID: number){
    const modalRef = this.modalService.open(DobAuthModalComponent, { size: 'md' });
    modalRef.componentInstance.id = userID;
  }

Here is the component.html of the modal, on response of which the above button should get disabled:

<button type="submit" class="btn btn-primary btn-elevate" (click) = "checkDOB()" routerLink = "/customer-user-management" > Proceed </button>

And component.ts file for the modal:

checkDOB(){
this.customerDetailService.updateDOB(this.id, this.customerDetailService.format(this.inputDOB)).subscribe(
      (res: any) =>{
        if(res.code == 200){
          this.toasterService.success(res.message);
          this.modalService.dismiss();

        }
      },
     (err: any) => {
        console.log(this.inputDOB);
        this.toasterService.error(err.error.message);
        this.modalService.dismiss();
     }
    )
  }

And the service.ts file for modal:

updateDOB(customerId, date_of_birth){
    return this.http.put(this.checkDOBUrl + `/${customerId}`, {date_of_birth}, {headers: this.getHeader()}) 
  }

Answer 1

It worked after adding the following code in .ts file for modal:

checkDOB(){
    this.customerDetailService.updateDOB(this.id, this.inputDOB).subscribe(
      (res:any) =>{
        if(res.code == 200){
          this.toasterService.success(res.message);
          this.modalService.dismiss();
          let disableBypassAuth = (document.getElementById(this.id) as HTMLInputElement);
          disableBypassAuth.disabled = true;
          setTimeout(function() {
            disableBypassAuth.disabled = false;
        }, 180000);
        }
      },
     (err: any) => {
        console.log(this.inputDOB);
        this.toasterService.error(err.error.message);
        this.modalService.dismiss();
     }
    )
  }

Answer 2

Add disabled attribute to the button template:

<button title="Bypass Authentication" [disabled]="disableBypassAuth" (click) = "opendobAuthModal(user.id)">Bypass Authentication</button>

In the component class, create a new variable disableBypassAuth and set it to false by default. Update the varibale to true after receiving the success response, like:

 (res: any) =>{
    if(res.code == 200){
      this.toasterService.success(res.message);
      this.modalService.dismiss();
      // emit an observable and catch it in the component class to set the disableBypassAuth to true
    }
  },