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

[achimha]

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

[pkozlowski-opensource]

The current behaviour is by design. We might consider having lazy-initiated tabs in the future so marking this as a feature request.

[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.

[PhilFlash]

Same problem, @achimha, thanks for the tip

[Bat-Orshikh]

@pkozlowski-opensource @maxokorokov

Hello, I am having same problem here,

So, is there any news?

[yohny]

with Tabset being deprecated, the same problem is valid for its recommended alternative Nav

[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>

[maxokorokov]

I think a way of fixing this might be something like:

// before
@Input() destroyOnHide: boolean;

// after
@Input() destroyOnHide: 'lazy' | boolean;

And just handling this this tabStatus internally.

UPD: However on reflection destroyOnHide="lazy" isn't clear at all, another input might be better