Dynamic Tab content rendering

Question

I'm developing tabs component and I want Angular to render and initialize only active tab instead of all tabs. How can it be done?

<my-tabs>
  <my-tab [tabTitle]="'Tab1'">
    <some-component></some-component>
  </my-tab>
  <my-tab [tabTitle]="'Tab2'">
    <some-component2></some-component2>
</my-tabs>

Basicaly In this case the first tub is active, so <some-component></some-component> should be initialized, but <some-component2></some-component2> shouldn't as Tab2 is not active

Answer 1

Use *ngIf on the component. When the value if false, the component will be removed from the DOM, and therefore not initialised. Something roughly like:

  <my-tab [tabTitle]="'Tab1'">
    <some-component *ngIf="tabOneActive" ></some-component>
  </my-tab>