Passing `ng-content` to `templateRef` not working

I am trying to pass the ng-content selector from my template. but not working either not errors. I am using storybook

story.ts:

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '@hf-workspace/material';
import { SchemaPopupProps } from '@hf-workspace/prop-types';
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
import { SchemaPopupSchema } from './popup.schema';
import { SchemaPopupModalComponent } from './schema-popup-modal.component';

@Component({
  selector: 'hf-workspace-schema-popup-holder',
  template: ` <button class="print-btn" mat-raised-button color="basic" (click)="openDialog()">Open Popup</button>
    <ng-template #customWrapperTemplate>
      <hf-workspace-schema-popup-modal>
        <div table>body table is here</div> //not getting
      </hf-workspace-schema-popup-modal></ng-template
    >`,
})
class SchemaPopupHolderComponent {
  @ViewChild('customWrapperTemplate') customTemplate: TemplateRef<HTMLAllCollection> | undefined = undefined;

  popupSchema: SchemaPopupProps;
  constructor(public dialog: MatDialog) {
    this.popupSchema = SchemaPopupSchema;
  }
  openDialog(): void {
    this.dialog.open(SchemaPopupModalComponent, {
      panelClass: 'schema-popup',
      maxWidth: '80vw',
      width: '80vw',
      data: this.popupSchema,
    });
  }
}

export default {
  title: 'SchemaPopupModalComponent',
  component: SchemaPopupModalComponent,
  decorators: [
    moduleMetadata({
      imports: [BrowserAnimationsModule, MaterialModule],
      declarations: [SchemaPopupModalComponent, SchemaPopupHolderComponent],
    }),
    componentWrapperDecorator(
      () => `
      <section class="wrapper">
        <hf-workspace-schema-popup-holder></hf-workspace-schema-popup-holder>
      </section>`
    ),
  ],
} as Meta<SchemaPopupModalComponent>;

const Template: Story<SchemaPopupModalComponent> = (args: SchemaPopupModalComponent) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {};

child component html:

<header *ngIf="data?.header?.required" >
  <h2>{{data.header.tittle}}</h2>
  <a class="icon-white-cls-btn" (click)="close()">
    <img src="./assets/images/icon-white-cls-btn.svg" />
  </a>
</header>
<mat-dialog-content class="mat-typography" *ngIf="data?.body?.required">
  <div class="session-report">
      <div>
        <div *ngFor="let info of data.body?.sessionReport?.info">
          <strong>{{info.label}}</strong>{{info.value}}
        </div>
      </div>
      <div>
        <div *ngFor="let report of data.body?.sessionReport?.report">
          <a href="#" [ngClass]="report.icon">{{report.link}}</a>
        </div>
      </div>
  </div>
  <main *ngIf="data.body?.templates?.required">
    <ng-container *ngFor="let temp of data.body?.templates?.tempRef">
      <div *ngIf="temp==='table'">
        <ng-content select=[table]></ng-content>//not working
      </div>
    </ng-container>
  </main>
 <p>{{data.header.tittle}}</p>
</mat-dialog-content>
<mat-dialog-actions align="end" *ngIf="data?.footer?.required">
  <ng-container *ngFor="let button of data.footer.buttons">
    <ng-container [ngSwitch]="button">
      <button *ngSwitchCase="'CANCEL'" mat-button mat-dialog-close>CANCEL</button>
      <button *ngSwitchCase="'APPROVE'" mat-button [mat-dialog-close]="true" cdkFocusInitial>APPROVE</button>
    </ng-container>
  </ng-container>
</mat-dialog-actions>