Trying to project ng-template into component

Question

I have an angular 19 application and components app-dashboard, app-table. I'm also using PrimeNG components and i want to project ng-template into app-table component:

@Component({
  selector: 'app-table',
  imports: [Skeleton, TableModule, NgTemplateOutlet],
  template: `
    <p-table>
      <ng-template let-row let-rowIndex="rowIndex" pTemplate="body">
       <ng-container
          [ngTemplateOutlet]="bodyCtx()"
          [ngTemplateOutletContext]="{ $implicit: row, rowIndex }"
        />
      </ng-template>
    </p-table>

  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableComponent<T> {
  public readonly bodyCtx = contentChild.required<TemplateRef<unknown>>('body');
}

@Component({
  selector: 'app-dashboard',
  imports: [
    TableComponent,
  ],
  template: `
    <app-table>
      <ng-template #body let-row let-rowIndex="rowIndex">
        <tr>
          <td>{{ row.name || '-' }}</td>
        </tr>
      </ng-template>
    </app-table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardComponent {}

But for some reason an error occurs:

ERROR NullInjectorError: R3InjectorError(Standalone[_DashboardComponent])[_Table -> _Table -> _Table]: 
  NullInjectorError: No provider for _Table!

What's wrong? Should i provide something else?

Answer 1

You will have to set "standalone: true" inside the @Component decorator. It should look something like this.

@Component({
  selector: 'app-table',
  standalone: true, // add this
  imports: [Skeleton, TableModule, NgTemplateOutlet],
  template: `
    <p-table>
      <ng-template let-row let-rowIndex="rowIndex" pTemplate="body">
       <ng-container
          [ngTemplateOutlet]="bodyCtx()"
          [ngTemplateOutletContext]="{ $implicit: row, rowIndex }"
        />
      </ng-template>
    </p-table>

  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableComponent<T> {
  public readonly bodyCtx = contentChild.required<TemplateRef<unknown>>('body');
}

---

import { Component, TemplateRef } from '@angular/core';
import { TableComponent } from './table.component';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [TableComponent],
  template: `
    <app-table>
      <ng-template #body let-row let-rowIndex="rowIndex">
        <tr>
          <td>{{ row.name || '-' }}</td>
        </tr>
      </ng-template>
    </app-table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardComponent {}