Lazy initialization missing. Nav destroyOnHide=false inits all tabs immediately

Bug description:

When a ngb-tabset is created with [destroyOnHide]=false, the content of all tabs is immediately created. With the default value of true, content is only created when switching to the respective tab. From the naming and documentation I would expect the only difference in behavior to be that already created tab content is not destroyed on tab change. I would not expect it to immediately construct all tab content.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.1.3

ng-bootstrap: v1.0.0-alpha.26

Bootstrap: 4.0.0-beta-6

[achimha]

A simple workaround:

tabstatus = {};

and

<ngb-tabset [destroyOnHide]="false" (tabChange)="tabstatus[$event.nextId]=true">
  ...
  <ngb-tab id="tab2" title="Second Tab">
    <ng-template ngbTabContent>
      <ng-container *ngIf="tabstatus['tab2'] === true">
      ...
      </ng-container>
    </ng-template>
  </ngb-tab>
  ...
</ngb-tabset>

I reported it as a bug because the behavior conflicts with the name destroyOnHide as it also makes the tabset construct all tabs at load time while with the default value, it would not do that.

[JasonPierce]

@achimha’s wonderful workaround, updated for ngbNav (now that ngb-tabset is deprecated)

JS/TS

tabStatus = {};

HTML

<ul ngbNav #nav="ngbNav" class="nav-tabs" [destroyOnHide]="false" (navChange)="tabStatus[$event.nextId] = true">
  <li [ngbNavItem]="1">
    <a ngbNavLink>First Tab</a>
    <ng-template ngbNavContent> We don't want this to lazy load, because it's the default tab </ng-template>
  </li>
  <li [ngbNavItem]="2">
    <a ngbNavLink>Second Tab</a>
    <ng-template ngbNavContent>
      <ng-container *ngIf="tabStatus[2] === true"> This content lazy loads </ng-container>
    </ng-template>
  </li>
  <li [ngbNavItem]="3">
    <a ngbNavLink>Third Tab</a>
    <ng-template ngbNavContent>
      <ng-container *ngIf="tabStatus[3] === true"> This content lazy loads </ng-container>
    </ng-template>
  </li>
  <li [ngbNavItem]="4">
    <a ngbNavLink>Fourth Tab</a>
    <ng-template ngbNavContent> This content doesn't lazy load, just as an example </ng-template>
  </li>
</ul>
<div [ngbNavOutlet]="nav"></div>