Send Observable result to child component as Signal

In my code I am trying to get the result from this observable

// Runs fine
obtenerOfertaPorId(id: number): Observable<Oferta> {
    return this.http.get<Oferta>(`${this.apiUrl}${this.base_url}/obtenerOfertaPorId/${id}`)
      .pipe(
        tap(resultado => console.log(resultado)),
        catchError(error => {
          console.log('Error fetching oferta by id');
          return throwError(() => new Error(error))
        })
      );
  }

On this component:

export class JobPostDetailPage {
  
  private activatedRoute = inject(ActivatedRoute);
  private id = this.activatedRoute.snapshot.paramMap.get('id')!;
  private ofertaService = inject(OfertaService);
  jobPost = toSignal(this.ofertaService.obtenerOfertaPorId(parseInt(this.id)));
  
}

To send the result as an input signal to the children:

<navbar-wrapper/>
    <job-posting-form [jobPostInput]="jobPost()"/>
<wkFooter/>

And then the job-posting-form (This component is also for creating new entities, which is why is too convoluted, but I am open to ideas to make it more clean)

export class JobPostingForm {

  private ofertaMapper = OfertaMapper;
  private fb = inject(NonNullableFormBuilder);
  private titleCasePipe = new TitleCasePipe();
  private contrataService = inject(ContrataService);
  
  formUtils = FormUtilsJobPosting;
  router = inject(Router);
  jobPostInput = input<Oferta>();

  tiposContratoOptions = Object.values(TipoContrato).map(value => ({
    label: this.titleCasePipe.transform(value),
    value: value
  }));
  
  tiposModalidadesOptions = Object.values(ModalidadTrabajo).map(value => ({
    label: this.titleCasePipe.transform(value), 
    value: value                               
  }));
  

  jobPostingForm: FormGroup<OfertaFormGroup> = this.fb.group({
    puesto: [this.jobPostInput()?.puesto || '', [Validators.required, Validators.pattern(this.formUtils.onlyCharactersRegex), Validators.maxLength(23)]],
    sector: [this.jobPostInput()?.sector || '', [Validators.required, Validators.pattern(this.formUtils.onlyCharactersRegex), Validators.maxLength(23)]],
    descripcion: [this.jobPostInput()?.descripcion || '', Validators.maxLength(23)],
    ciudad: [this.jobPostInput()?.ciudad || '', [Validators.required, Validators.pattern(this.formUtils.onlyCharactersRegex), Validators.maxLength(23)]],
    horas: [this.jobPostInput()?.horas || null as number | null, [Validators.required, Validators.pattern(this.formUtils.onlyNumbersRegex)]],
    salarioAnual: [this.jobPostInput()?.salarioAnual || null as number | null, [Validators.required, Validators.pattern(this.formUtils.onlyNumbersRegex)]],
    modalidadTrabajo: [this.jobPostInput()?.modalidadTrabajo || null as ModalidadTrabajo | null, Validators.required],
    tipoContrato: [this.jobPostInput()?.tipoContrato || null as TipoContrato | null, Validators.required],
  });

  submitForm () {
    this.jobPostingForm.markAllAsTouched();

    if (this.jobPostingForm.valid) {
      this.contrataService.uploadNewOferta(
        this.ofertaMapper.mapNewOfertaFormGroupToOferta(this.jobPostingForm)
      ).subscribe({
        next: () => this.router.navigate(['employerSection','myJobPostings'])
      })
    }

  }

  goBackEvent () {
    this.router.navigate(['employerSection','myJobPostings'])
  }

}

My problem is that the input does not register the changes when the observable resolves and thus the form does not render the values from the observable request.

I already tried using the async pipe sending the observable on the input and I also tried using ngOnChanges to change the input value, but that is not possible.

Can it be done without lifecycle hooks? I am using Angular 20