I am currently facing an issue that involves the following code snippet in my HTML file:
<form-section>
<p>Hello</p>
<form-section>
<ng-template test-template>
TEST
</ng-template>
</form-section>
</form-section>
When I view the output, it appears like this:
Hello TEST
TEST
However, the desired output should be:
Hello
TEST
The structure of my form-section-component.html includes:
<div *ngIf="actionTemplate">
<ng-template [ngTemplateOutlet]="actionTemplate"></ng-template>
</div>
In my form-section-component.ts:
@ContentChild(TemplateDirective, { read: TemplateRef, static: false }) actionTemplate: TemplateRef<any>;
It seems that the template is being displayed even when it shouldn't be. The parent component is showing the template despite having no content. Any suggestions on how to resolve this issue would be appreciated.