Angular 12: <ng-template> of child-component is set as @ContentChild in parent-component

Viewed 95

I have a problem, where the TemplateRef for a <ng-template> is injected as @ContentChild to the wrong component (to its parent component).

To reproduce it, I've created a stackblitz: https://stackblitz.com/edit/angular-ivy-raqagg?file=src/app/app.component.html

What I don't understand: Why is the <ng-template> within <app-sub-class> also a content-child of <app-super-class>?

<app-super-class>
  <app-sub-class>
    <ng-template #test> TEST-TEMPLATE IN &lt;app-sub-class&gt; </ng-template>

    SUB-CLASS-CONTENT
  </app-sub-class>

  SUPER-CLASS-CONTENT
</app-super-class>

If you place another <ng-template> to the <app-super-class> before <app-sub-class>, then SuperClassComponent gets its own TemplateRef (the correct one).

If you place a <ng-template> within <app-super-class> but after <app-sub-class>, it will get the template-ref, which is within <app-sub-class>.

If the <app-super-class> does not have a <ng-template>-child, it gets the TemplateRef of the template within <app-sub-class>

I don't believe, that this behavior is intended, or is it?

0 Answers
Related