Component initialization in ng-template

Question

I am using ng-content to wrap one Angular component in another. The outer component should have full control about when the inner component is rendered or not. However, I ran into a situation, that I don't understand. The outer component uses a template like the following (simplified):

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

From my understanding, the content should not be rendered at all, as it is contained in the ng-template . In this example stackblitz , you can see that the inner component is not rendered, but it is still initialized. The console log in the inner component's OnInit still shows up in the console.

My question is:

• Why does this happen?
• How can I avoid component initialization in this case?

Answer 1

Angular documentation has information about structure directives: it just renders or not the template, - there is no detail information about loading component inside.

Secondly you pass already compiled and rendered object to the ng-content .

If you want lazy loading for the template, just pass the template:

<app-outer>
  <ng-template>
    <app-inner></app-inner>
  </ng-template>
</app-outer>

And

outer.component.html

<ng-content></ng-content>
<ng-template [ngTemplateOutlet]="template"></ng-template>

outer.component.ts

@Component({
  selector: 'app-outer',
  templateUrl: './outer.component.html'
})
export class OuterComponent {
  @ContentChild(TemplateRef) template: TemplateRef<unknown>;
}