how do i add formgroup dynamically to other component in angular

Question

so i have two components which is increment component and the other is registration component im looking for a way to how to increment formgroup by click of button to be more specific my increment component has three buttons which are increment button,decrement button and a register button so each time i click on increment button the form should increase so for example lets say i have clicked increment button three times and hit the register button so i should see 3 formgroups in my registration component app.html

<app-counter  [count]="myCount" [productForm]="myproductForm" (change)="countChange($event)" (onFormGroupChange)="onFormGroupChangeEvent($event)" ></app-counter>

app.ts

import { FormBuilder, FormGroup, FormArray, Validators, FormGroupDirective, FormControl } from '@angular/forms';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 title = 'bbbb';
 myCount: any = 0;
 myproductForm!: FormGroup; 
   
   constructor() {
        
      
       this.myproductForm = this.fb.group({  
           name: '',  
           quantities: this.fb.array([]) ,  
         });  
    }
    formCheck :any  = '' 
    public onFormGroupChangeEvent(_event: any) {
        this.myproductForm = _event
      this.formCheck = _event;
      console.error(_event, this.formCheck['controls'])
    }

   ngOnInit(): void {
      
   }
  
     countChange(event: number) {
       this.myCount = event;
   }
  
}

counter.html

<button (click)="increment();addQuantity()">ADD</button>{{count}}
<button (click)="decrement()">SUB</button> 
<form [formGroup]="productForm" (ngSubmit)="onSub()">  
     
    <p>  
      <label for="name">Product Name:</label>  
      <input type="text" id="name" name="name" formControlName="name" class="form-control">  
    </p>  
    
    <table class="table table-bordered" formArrayName="quantities">  
      <tr>  
        <th colspan="2">Add Multiple Quantity:</th>  
        <th width="150px"><button type="button" (click)="addQuantity()" class="btn btn-primary">Add More</button></th>  
      </tr>  
      <tr *ngFor="let quantity of quantities().controls; let i=index" [formGroupName]="i">  
          <h5>player {{i+1}}</h5>
         
        <td>  
            Quantity :  
            <input type="text" formControlName="qty" class="form-control">  
        </td>  
        <td>  
            Price:  
            <input type="text" formControlName="price" class="form-control">  
        </td>  
        <td>  
            <button (click)="removeQuantity(i)" class="btn btn-danger">Remove</button>  
        </td>  
      </tr>  
    </table>  
     
    <button type="submit" class="btn btn-success">Submit</button>  
      
  </form>

counter.ts

import { FormBuilder, FormGroup, FormArray, Validators, FormControl } from '@angular/forms';


@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent implements OnInit {
  @Input()
  count: any = 0;
  @Output()
  change: EventEmitter<number> = new EventEmitter<any>();
  @Output()  onFormGroupChange:EventEmitter<any> = new EventEmitter<any>();
  @Input() productForm!: FormGroup;  
  constructor(private fb:FormBuilder) { 
    this.productForm = this.fb.group({  
      name: '',  
      quantities: this.fb.array([]) ,  
    });  
  }
  employeeForm = new FormGroup({
    firstName:new FormControl(),
    lastNAme:new FormControl(),
    email:new FormControl()
 });

  ngOnInit(): void {
    this.onFormGroupChange.emit(this.employeeForm);
    
  }
  increment() {
    this.count++;
    this.change.emit(this.count);
    
  }
 
  decrement() {
    if (this.count != 0) {
    this.count--;
    
  }
  
}
quantities() : FormArray {  
  return this.productForm.get("quantities") as FormArray  
}  
   
newQuantity(): FormGroup {  
  return this.fb.group({  
    qty: '',  
    price: '',  
  })  
}  
   
addQuantity() {  
  this.quantities().push(this.newQuantity()); 
  
}  
   
removeQuantity(i:number) {  
  this.quantities().removeAt(i);  
}  
   
onSub() {  
  console.log(this.productForm.value);  
}
}

appreciate any help i get