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

[tgarijo]

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

[tgarijo]

Hi, I solved the problem setting Editable Column when call to child from parent child

Old call

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

New call

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

        </td>

But I don't know why. Someone could explain to me?
Thank you

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,