Share a form result between parent/child angular components?

I have a form inside a child component and I use that component's selector to pass the form template inside another parent component.
This form has some options to be selected and I would like to get the result selected by the user and handle it inside the child component.

I'm using an event in the parent component but it's not working. I want to get what was selected inside the simple formControlName.

CHILD HTML

<form formGroup="form" autocomplete="off" (change)="onChangeEvent($event)">
  <voxel-likert formControlName="simple" (change)="onChangeEvent($event)">
    O que você achou dessa nova experiência?
  </voxel-likert>
  <div *ngIf="form.controls.simple.value" >
    {{ form.controls.simple.value | json }}
  </div>
</form>

CHILD COMPONENT

export class MyComponent implements OnInit {

  @Input() form = new FormGroup({
    simple: new FormControl(''),
  });


  @Output() responseEvent = new EventEmitter<any>();

  constructor() {}

  ngOnInit(): void {

    this.responseEvent.emit(this.form);
    console.log('form likert', this.form.value);

  }

  public onChangeEvent(_event){
    this.responseEvent.emit(this.form);

    this.form.addControl(
      'simple',
      new FormGroup(this.form.controls)
    );

  }
}

PARENT HTML

<ui-likert 
  (responseEvent)="onFormGroupChangeEvent($event)"></ui-likert>

PARENT COMPONENT

export class ParentComponent

{
  form = new FormGroup({
    simple: new FormControl(''),
  });

  public onFormGroupChangeEvent(_form) {
    this.form = _form;
    console.log("form",_form);

  }


}

How do I get the value that the user is selecting in the parent component? but I want to get this value inside the child component

In Angular, @Input() is a reference. As such, if you pass a reference to a child component, you can still access the properties, call methods, etc on your reference from the parent or child.

Sending information back to the parent in this case via @Output (a custom event emitter) isn't necessary, as the reference is created on the parent and therefore accessible, even if the child modifies the reference.

Here's an example of how you can see the values of a reactive form change on the parent, even though the form is rendered by the child:

// parent.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-parent',
  template: `
    <app-child-component [form]="form"></app-child-component>

    Form Value: {{ form.value | json }}
  `,
})
export class ParentComponent implements OnInit {

  form!: FormGroup;

  ngOnInit(): void {
    this.form = new FormGroup({
      field1: new FormControl(''),
    });

    this.form.valueChanges.subscribe(value => {
      // do something
    });
  }

}

// child.component.ts

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-child',
  template: `
    <form *ngIf="form" [formGroup]="form" role="form">
      <label for="field1">Field 1</label>
      <input formControlName="field1" id="field1" type="text" />
    </form>
  `,
})
export class ChildComponent {

  @Input()
  form!: FormGroup;

}

If you modify the value of field1 on the form in the child, it's value will be reflected in the parent.

You can also subscribe to the valueChanges() in the parent to be notified whenever the form value changes, and you could do something with the value.

Hope that helps you out.