Based on number of clicks display those many forms but the display is in another component

Question

so i have two components which is my app component and a counter component here is my app component

Parent: {{ myCount }}
<app-counter  [count]="myCount" (change)="countChange($event)" (onFormGroupChange)="onFormGroupChangeEvent($event)"></app-counter>

here is my app.ts

myCount: number = 0; 
productForm!: FormGroup;  
   constructor() { }
countChange(event: number) {
       this.myCount = event;
   }

here is my counter.html

<button (click)="increment()">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>

here is my counter.ts

export class CounterComponent implements OnInit {
  @Input()
  count: any = 0;
  @Output()
  change: EventEmitter<number> = new EventEmitter<any>();
  @Output()  onFormGroupChange:EventEmitter<any> = new EventEmitter<any>();
  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--;
    this.change.emit(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);  
}

so i have a increment function in my counter component and based on this increment number i want to display those many number of forms but display it in app component...addition to this i will also have a register button in my counter component so finally what i want to achieve is i will have increment and decrement button in my counter component with a register button that will redirect me to app component so based the the number of times i clicked the increment button i have to display those many number of forms in my app component and when i click on register button it will redirect me to app component with those many number of forms in the display

appreciate any help i get