Retrieving a component instance from an ng-template

Hey all!

I have a directive that needs access to a component instance in order to function correctly.

@Directive({
  selector: '[helloDirective]'
})
export class HelloDirective implements AfterContentInit {

  @ContentChild(HelloComponent) helloComponent: HelloComponent;

  ngAfterContentInit(): void {
    if (this.helloComponent) {
      console.log(`Hello ${this.helloComponent.name}!`);
    } else {
      console.error('helloComponent is undefined')
    }
  }
}

If I use HelloComponent as content inside a wrapper with helloDirective on it, everything works as expected. The directive has access to the component instance:

<div helloDirective>
  <hello [name]="'Bob'"></hello>
</div>

The console prints Hello Bob! with no problems.

However, if I use a container that references a template as content:

<div helloDirective>
  <ng-container [ngTemplateOutlet]="tpl"></ng-container>
</div>

<ng-template #tpl>
  <hello [name]="'Suzy'"></hello>
</ng-template>

The console prints helloComponent is undefined since the content is now contained in a template.

The documentation for ContentChild says:

Does not retrieve elements or directives that are in other
components’ templates, since a component’s template is always a black
box to its ancestors.

I would like to reuse a template view instead of copying and pasting the code for the view everywhere.

How can I attach the view of #tpl as content so HelloDirective can find a component instance of HelloComponent?

StackBlitz example of the problem here!