Angular 6 with Ng-Bootstrap setting [destroyOnHide]=“false” causes all tabs to render simultaneously under each other

0
votes

I am using angular 6 and ng-bootstrap, if I set the [destroyOnHide]=false attribute on the ngb-tabset component each tab entry renders simultanously: 

<ngb-tabset #tabs="ngbTabset" [activeId]="activeIdString" [destroyOnHide]="false">  
  <ngb-tab id="vesssel" title="Vessel Details">
    <ng-template ngbTabContent >
      Test one
    </ng-template>    
  </ngb-tab>
  <ngb-tab id="installation" title="Installation"  >
    <ng-template ngbTabContent>
    Test Two
    </ng-template>
  </ngb-tab>


</ngb-tabset>

causes both contents to render. The tabs still display and toggle but the content is constant.

Test one
Test Two

If I remove the [destroyOnHide] attribute the tabs function correctly.

Bootstrap version "@ng-bootstrap/ng-bootstrap": "^2.2.1" Angular version "@angular/common": "^6.1.0",

1
angularng-bootstrap
Can't reproduce: stackblitz.com/edit/angular-ykza8h?file=app%2Ftabset-basic.html. Look at your console, you must have an error listed there. If not, post a complete minimal example, as I just did, but which actually reproduces the problem. – JB Nizet
ok I'll try and reproduce this in isolation- no errors in console! – David
I can't reproduce this in isolation either so I suspect there is a library conflict somewhere. the behaviour inside my application is consistently broken so I will attempt updating all relevant dependencies to see if there is a version clash – David

1 Answers

0
votes

This may help somebody in the future. What I didn't realise is that the [destroyOnHide]=false attribute actually instantiates all of the components in the tabset when it is loaded, which is different functionality to the default mode which normally only renders a tab entry component on demand. Our web css styler had overridden the default bootstrap tab styles to not associate the 'active' class with a display:none style so even though only one of the tabs is active, they all appeared.