Why doesn't it work the same way when I encapsulate a component in a child component?

Describe the bug

For example, input or p-calendar.

Let me explain. I have a p-table component in a parent component with its td elements, and inside the td, there's a peditable Column. Inside this peditable Column, I have a p-calendar component that works fine. However, when I try to encapsulate this p-calendar component within a child component, it doesn't behave the same way as it does in the parent component. For example, in the parent component, the p-calendar correctly deploys a calendar to select dates. However, in the child component, the calendar does not deploy as expected, the calendar no show

This is my code Work well:

<td pEditableColumn >
    <p-cellEditor>
         <ng-template pTemplate="input">
             <p-calendar
                  (onSelect)="blurFrom($event, rowIndex)"
                  class="p-inputtext-sm" formControlName="From" appendTo="body" dateFormat="dd/mm/yy" />
           </ng-template>
            <ng-template pTemplate="output">
                {{ Rows.from }}
             </ng-template>
    </p-cellEditor>
</td>

And that is the code doesn't work well:

<td pEditableColumn class="calendar">
    <!--child  Component-->
     <fromDate [formGroup]="hotelFormGroup" [indexDate]="rowIndex" (itemEvent)="blurTo($event, rowIndex)"/>
 </td>

/Child Code component/

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ControlContainer, FormArray, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TableModule } from 'primeng/table';

@Component({
  selector: 'fromDate',
  standalone: true,
  imports: [
    CommonModule,
    TableModule,
    ReactiveFormsModule,
  ],
  template: `
    <ng-container [formGroup]="form">
      <p-cellEditor>
        <ng-template pTemplate="input">
          <p-calendar class="p-inputtext-sm"
          formControlName="From"
          appendTo="body" dateFormat="dd/mm/yy"
          (onSelect)="blurFrom($event)"
          />
        </ng-template>
        <ng-template pTemplate="output">
          {{ from }}
        </ng-template>
      </p-cellEditor>
  </ng-container>

    <!-- (onSelect)="blurFrom($event, rowIndex)" -->
  `,
  styleUrl: './from.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FromComponent implements OnInit{

  @Input() public form!: FormGroup;
  @Input() indexDate!: number;
  @Output() itemEvent = new EventEmitter<Date>();

  from: string = '';

  constructor(private controlContainer: ControlContainer) {}

  get rows() : FormArray {
    return this.form.get('Rows') as FormArray;
  }

  ngOnInit(): void {
    this.form = <FormGroup>this.controlContainer.control;
    this.from = this.rows.value[this.indexDate].From;
    console.log('FromComponent', this.form);
  }
  blurFrom(event: any) {
    debugger
    console.log('blurFrom', event);
    this.itemEvent.emit(event);
  }
}

If you need further assistance with the wording of your email or its content, please let me know.

Environment

"@angular/core": "^17.0.6", "primeng": "^17.12.0",

Reproducer

No response

Angular version

17.0.6

PrimeNG version

17.12.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

chrome 126.0.6478.61

Steps to reproduce the behavior

No response

Expected behavior

No response

primefaces / primeng