Right now I am creating a library (my-custom-library) and a project in which we'll use that library (called my-Project)

The requirement is, that within my-project I have to use my-custom-library, extended with templates, like this (my-project's app.component.html):

<my-custom-library>
   <ng-template #myTemplate>
      <div>Some static content for now</div>
   </ng-template>
</my-custom-library>

The reason for this is, that in my-custom-library they want to have template-able components, where the template is given from the outside (in this case from my-project).

Within my-custom-library I'm supposed to access the given template(s) and pass them to the corresponding components. This I'm trying to achieve (my-custom-project's app.component.ts)

@ContentChild("myTemplate") myTemplateRef?: TemplateRef<any>;

(my-custom-project's app.component.html)

<ng-container [ngTemplateOutlet]="myTemplateRef"></ng-container>

My problem is, that the contentChild is always empty, the template never renders. The structure itself I think is working, since when I'm moving this same structure within just one project and use it there everything works fine, the contentChild gets its value and "my template" is rendered. One more information, I don't know if its useful but my-custom-library is created like this (my-custom-library's app.module.ts):

export class AppModule {
  constructor(private injector: Injector) {
    const customElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-custom-library', customElement);
  }
} 

What could cause this issue? Is it even possible to achieve this?