@ContentChild to access a Directive used in a native dialog is undefined

Question

I have created a repl with working code. The problem is in dialog.component.ts, line 46 this.content is console logging out as undefined

https://replit.com/@Sonnerz/GlumTestyBrains#src/app/dialog/dialog.component.ts

I have a header bar with a config button. The config button successfully opens a native dialog window. The header bar markup has the dialog component and an ng-template. The template is so that the dialog component is reusable, others can use the dialog-component and add their own content to <ng-template appDialogContent>.

My problem is that the DialogComponent cannot read the tpl prop of the DialogContentDirective. I think it's maybe because the DialogComponent is standalone, but at this point I'm not sure. The subject of templates is new to me right now.

When I console log out content!: DialogContentDirective in the dialog component it is undefined. The dialog opens but I never see the contents of <my-config>

Header bar markup:

<button (click)="dialog.showModal()">
    
<dialog-component #dialog title="My config">
  <ng-template appDialogContent>
    <my-config></my-config>
  </ng-template>
</dialog-component>

Dialog template - dialog.component.html:

<dialog #dialogComponent>
  <section>
    <main>
      <ng-container #contentVcr></ng-container>
    </main>
  </section>
  <button (click)="close()">Close</button>
</dialog>

Dialog content directive - dialog-content.directive.ts

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: 'appDialogContent',
})
export class DialogContentDirective {
  constructor(public tpl: TemplateRef<any>) {}
}

Dialog component - dialog.component.ts:

import {Component,ContentChild,ElementRef,HostListener,Input,ViewChild,ViewContainerRef,
} from '@angular/core';
import { DialogContentDirective } from './dialog-content.directive';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'dialog-component',
  templateUrl: './dialog.component.html',
  standalone: true,
  imports: [CommonModule]
})

export class DialogComponent {
  @ContentChild(DialogContentDirective) content!: DialogContentDirective;

  @ViewChild('contentVcr', { read: ViewContainerRef, static: true })
  private contentVcr!: ViewContainerRef;

  @ViewChild('dialogComponent')
  private dialogComponent!: ElementRef;

  constructor() {}

  showModal() {
    console.log(this.content) // 'this.content' is undefined
    this.dialogComponent.nativeElement.showModal();
    this.contentVcr.createEmbeddedView(this.content.tpl);
  }

...
}