Directive pResizableColumn causes NullInjectorError if it is added from component's content

[ArturGudiev]

I have a simple table from docs with resizable columns

<p-table
    [value]="products"
    [resizableColumns]="true"
    styleClass="p-datatable-gridlines"
    [tableStyle]="{'min-width': '50rem'}">
        <ng-template #header>
            <tr>
                <th pResizableColumn>Code</th>
                <th pResizableColumn>Name</th>
                <th pResizableColumn>Category</th>
                <th pResizableColumn>Quantity</th>
            </tr>
        </ng-template>
        <ng-template #body let-product>
            <tr>
                <td>{{product.code}}</td>
                <td>{{product.name}}</td>
                <td>{{product.category}}</td>
                <td>{{product.quantity}}</td>
            </tr>
        </ng-template>
</p-table>

I need a table wrapper for some purposes but for that I need to form header and body templates outside the table-wrapper component. Let's start only with header templates. So here is my parent component (app.component.html)

<app-table-wrapper>
  <ng-template pTemplate="header" #headerContent>
    <tr>
      <th pResizableColumn>Code</th>
      <th pResizableColumn>Name</th>
      <th pResizableColumn>Category</th>
      <th pResizableColumn>Quantity</th>
    </tr>
  </ng-template>
</app-table-wrapper>

and here is my table-wrapper component

table-wrapper.component.ts

// table-wrapper.component.ts
@Component({
  selector: 'app-table-wrapper',
  templateUrl: './table-wrapper.component.html',
  standalone: true,
  imports: [
    TableModule,
    CommonModule
  ],
  styleUrls: ['./table-wrapper.component.scss']
})
export class TableWrapperComponent {
  products = [...]

  @ContentChild('headerContent') headerContent!: TemplateRef<any>;


}

table-wrapper.component.html

<p-table [value]="products" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">

  <ng-template pTemplate="header">
    <ng-template *ngTemplateOutlet="headerContent"></ng-template>
  </ng-template>

  <ng-template pTemplate="body" let-product #bodyContent>
    <tr>
      <td>{{product.code}}</td>
      <td>{{product.name}}</td>
      <td>{{product.category}}</td>
      <td>{{product.quantity}}</td>
    </tr>
  </ng-template>
</p-table>

The problem is that for some reason pResizableColumn directive causes NullInjectorError.

But If I add the whole table to any of 2 components fully (app.component or table-wrapper.component) no error will be shown. Is there a possible solution to get rid of this bug?

Here is a link of this project in code sandbox