In angular form is getting submitted without form value

Question

Below Is my html and ts code I have added settimeout for 2seconds to get the response and append to form without which value is not getting appended. Please provide any alternate solution if we can avoid settiemout here

export class ABCComponent implements OnInit {

  private subscriptions: Subscription[] = [];
  amount: any;
  samlResponse: string | undefined;
  @ViewChild('hiddenForm') hiddenForm: ElementRef | undefined;

 

  ngOnInit(): void {
    const routeSubscription = this.activatedRoute.params.subscribe({
      next: (params: Params) => {
        this.amount = params['val']
      }
    })
    this.subscriptions.push(routeSubscription);
    this.onPageLoad();
  }

  onPageLoad(){
    let payload ={
      "val":this.val
    }
   
    this.service.api(payload).subscribe( {
      next: ((response: any) => {
        this.res = response.res;
       setTimeout(() => {
        this.submitForm();
       }, 2000);
      }),
      error: (value: any) => { 

      }
    }
    )}

    submitForm(){
        this.hiddenForm?.nativeElement.submit();
    }
}

<div class="d-flex align-items-center container-fluid min-vh-100">
<form #hiddenForm method="post" action="example.com"
(ngSubmit)="submitForm()">
    <input type="hidden" [value]="res" name="res">
<button type="submit" style="display: none;">Submit</button>
</form>
<div class="text-center w-100 fs-4"><b>Redirecting...</b></div>
</div>