CODEWITHSUNDEEP
javascriptangular
Fynn
Fynn

Reputation: 4873

Component initialization in ng-template

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:

Upvotes: 3

Views: 1311

Answers (1)

Anton Marinenko
Anton Marinenko

Reputation: 2982

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>;
}

Upvotes: 2

Related Questions