Getting templateRef of host component in directive

Component1: I have a component that has ng-template and content under it

<ng-template #content><ng-content></ng-content></ng-template>

Directive: In my directive, I am trying to get templateRef, but it's always empty. (Tried in ViewInit and ContentAfterInit both) (I have to pass this template ref to a service in order to open the modal)

@ViewChild('content') public templateref: TemplateRef<any>;

Usage:

<app-component1 directive1> <app-anothercomponent>.....<app-component2> .... </app-component1>

Is it even possible to get ng-template content in the directive?
Slackblitz: https://stackblitz.com/edit/angular-directive-view-children-y59xnh?file=app%2Finput-overview-example.html

What I think you're asking is how do I get a TemplateRef from a Directive's host Component?

If you know the component's type in advance, then you can reference it directly from the directive:

export class Directive1Directive implements AfterViewInit {
  constructor(@Host() @Self() private host: Component1Component) {}
  ngAvterViewInit(): void {
    console.log(this.host.templateRef);
  }
}

It becomes more tricky if you don't know the expected host component's type. The best way to generically inject a host component into a directive is to have that host directive implement a class and provide that component as that class.

You can start by creating a class that has all properties from the host component that you want to reference. In this case we're just declaring property that exposes the TemplateRef. The only reason why a class is used over an interface is that it reduces the need for using an InjectionToken.

export abstract class BaseComponent {
  public templateRef?: TemplateRef<any>;
}

The only wrinkle in the host component is that we need to a provider is added to its providers array that basically "reprovides" itself under the alias of BaseComponent. The function forwardRef is used to create a deferred reference to something declared later.

@Component({
  /*...*/
  providers: [{ provide: BaseClass, useExisting: forwardRef(() => Component1Component ) }]
})
export class Component1Component implements BaseComponent {
  @ViewChild('content') public templateRef?: TemplateRef<any>;
}

The directive is basically unchanged.

export class Directive1Directive implements AfterViewInit {
  constructor(private host: BaseComponent) {}
  ngAvterViewInit(): void {
    console.log(this.host.templateRef);
  }
}

A lot of this answer came from How You Can Access All Host Component Details Inside the Directive in Angular.