How can I patch values to mat-autocomplete only after I have gotten the values via WritableSignals?

Question

I am in a team that is developing an enterprise-level full-stack web application using Spring-boot and Angular v18. The website will have multiple tables and each table will have its respective add/edit form. The configuration for each form is acquired by sending a request to the backend REST API. Then based on the configuration the forms are rendered via a form-component in the frontend. Some forms might have dropdowns whose options are get via a dropdown service which itself uses WritableSignals to acquire the options by again doing a call to the backend. The issue I am facing right now is that only for the first time when I open the form the options are not getting patched to the respective dropdown. If I close the form and open it back again immediately then everything seems to be working. From debugging the code what I can understand is that the field is getting rendered before the dropdown service can acquire the options, but I am not sure how to move forward with solving this issue.

dropdown-helper.service.ts:

@Injectable({
  providedIn: 'root'
})
export class DropdownHelperService {
 dropdownOptionsMap = new Map<string, WritableSignal<Option[]>>();
 
 constructor(private dataService: DataService) {
  environment.tableDetails.map(table => {
    return table.tableDatabaseName;
  }).forEach(table => {
    this.dropdownOptionsMap.set(table, signal<Option[]>([]))
  });
 }

 loadDropdownOptions(tableName: string) {
   this.dataService.getDropdownSuggestions(tableName).subscribe((dropdownOptions: any[]) => {
   const options: Option[] = dropdownOptions.map(option => ({
        value: option.id,
        label: option.values.join(' / ')
   }));

   const signalRef = this.dropdownOptionsMap.get(tableName);

   if(signalRef) {
     signalRef.set(options);
   }
  }
 }
}

form.component.ts:

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [
  /* various imports */
  ],
  templateUrl: './form.component.html',
  styleUrl: './form.component.css',
  providers: [provideNativeDateAdapter()]
})

export class FormComponent implements OnChanges {
  @Input('getFormRequestData') getFormRequestData: FormComponentDataModel;
  @Input() fieldsArray: FormField[];

  dataForm: FormGroup;
  formArray: FormArray;
  filteredOptions: Map<string, Observable<Option[]>>;

  constructor(private formBuilder: FormBuilder, public dropdownHelper: DropdownHelperService) {
    this.getFormRequestData = {
      tableName: '',
      mode: '',
      data: []
    }
    this.dataForm = this.formBuilder.group({
      forms: this.formBuilder.array([])
    });

    this.formArray = this.dataForm.get('forms') as FormArray;
    this.fieldsArray = [];
    this.filteredOptions = new Map<string, Observable<Option[]>>();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['fieldsArray'] && !changes['fieldsArray'].firstChange && this.fieldsArray?.length > 0) {
      this.addForm();
    }
  }

  addForm() {
    if (this.formArray.length > 0) {
      this.formArray.clear();
    }

    const {mode, data} = this.getFormRequestData;
    if (mode === 'edit' && data.length > 0) {
      for (const initialData of data) {
        this.formArray.push(this.createFormGroup(initialData));
      }
    } else if (mode === 'add' && data.length > 0 && data[0]['numberOfRowsToBeAdded'] !== 0) {
      for (let i = 0; i < data[0]['numberOfRowsToBeAdded']; i++) {
        this.formArray.push(this.createFormGroup());
      }
    }
  }

  createFormGroup(initialData?: any) {
    const group = this.formBuilder.group({});
    this.fieldsArray.forEach(field => {
      if (field.controllerName !== null && field.controllerName !== undefined) {

        const controller = new FormControl();
        this.setupFormControl(controller, field);

        if (field.type === 'select' && field.selectOptions.dropdownTable !== null) {
          // setting up the options for each dropdown
          this.setupDropdown(field, controller);
        }

        if (this.getFormRequestData.mode === 'edit' && initialData && (initialData[field.controllerName] !== null || initialData[field.controllerName] !== '')) {
          this.patchControlValue(field, controller, initialData[field.controllerName]);
        }

        controller.updateValueAndValidity();
        group.addControl(field.controllerName, controller);
      }
    });

    return group;
  }

  setupFormControl(control: FormControl, field: FormField) {
    if (field.validators.validators !== null && field.validators.validators !== undefined) {
      const validatorFns: ValidatorFn[] = [];

      field.validators.validators.forEach(validator => {
        switch (validator.type) {
          case 'required':
            validatorFns.push(Validators.required);
            break;
          case 'maxLength':
            validatorFns.push(Validators.maxLength(Number(validator.arg)));
            break;
          case 'minLength':
            validatorFns.push(Validators.minLength(Number(validator.arg)));
            break;
          case 'exactDigitsValidator':
            validatorFns.push(exactDigitsValidator(Number(validator.arg)));
            break;
          case 'requiredNonWhitespaceValidator':
            validatorFns.push(requiredNonWhitespaceValidator())
            break;
        }
      });

      if (validatorFns.length > 0) {
        control.setValidators(validatorFns);
      }
    }

    field.disabled ? control.disable() : control.enable();
  }

  patchControlValue(field: FormField, control: FormControl, data: any) {
    let controlData = data;

    if (field.inputType === 'date') {
      controlData = new Date(data);
    }

    if (field.type === 'select') {
      this.filteredOptions.get(field.controllerName)?.subscribe(options => {
        const selectedOption = options.find(option => option.value === data);
        if (selectedOption) {
          controlData = selectedOption.value;
        }
      });
    }

    control.setValue(controlData);
  }

  setupDropdown(field: FormField, control: FormControl) {
    let filterColumns: string[] = [];
    let filterOptions: string[] = [];
    let column = field.selectOptions.filterColumns.columns;

    if (column !== null && column.length > 0) {
      column.forEach(c => {
        filterColumns.push(c.columnName);
        filterOptions.push(c.filter);
      })
    }

    // populating the dropdownmap in the dropdown service
    this.dropdownHelper.loadDropdownOptions(field.selectOptions.dropdownTable, filterColumns, filterOptions);

    this.filteredOptions.set(
      field.controllerName,
      control.valueChanges.pipe(
        startWith(''),
        map(value => {
          const filterValue = typeof value === 'string' ? value.toLowerCase() : '';
          return this.dropdownHelper.dropdownOptionsMap
            .get(field.selectOptions.dropdownTable)!()
            .filter(option =>
              option.label.toLowerCase().includes(filterValue)
            );
        })
      ))
  }
}

form.component.html:

<form [formGroup]="dataForm">
  <div formArrayName="forms">
    @for (form of getForms(); track form; let i = $index) {
      @if (i > 0) {
        <mat-divider class="m-5"></mat-divider>
      }
      <div [formGroupName]="i">
        @for (field of fieldsArray; track $index) {
          @if (field.display) {
            @switch (field.type) {
              <!-- different cases for different field types -->
              @case ('select') {
                <mat-form-field class="w-50 pb-3 pe-2" appearance="outline">
                  <mat-label>{{ field.displayName }}</mat-label>
                  <input type="text"
                         placeholder="Pick one"
                         matInput
                         [formControlName]="field.controllerName"
                         [matAutocomplete]="auto">
                  <mat-error
                    *ngIf="isFormControlInvalid(field.controllerName, i) && form.get(field.controllerName)?.hasError('required')">
                    This field is required
                  </mat-error>
                  <mat-icon matSuffix>arrow_drop_down</mat-icon>
                  <mat-autocomplete #auto="matAutocomplete"
                                    [displayWith]="displayFn(filteredOptions.get(field.controllerName)! | async)">
                    @for (option of filteredOptions.get(field.controllerName)! | async; track option) {
                      <mat-option [value]="option.value">{{ option.label }}</mat-option>
                    }
                  </mat-autocomplete>
                </mat-form-field>
              }
            }
          }
        }
      </div>
    }
  </div>
</form>