Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ngbTabset] add option to hide inactive tabs instead of destroying them

See original GitHub issue

Feature proposal: add a NgbTabset subclass where the template would bind to visibility instead of *ngIf so that inactive tab contents won’t get destroyed when switching.

This makes sense for tabs that contain components which are expensive to re-instantiate or contain state that gets lost, for example a video player.

Issue Analytics

State:
Created 7 years ago
Reactions:3
Comments:6 (3 by maintainers)

Top GitHub Comments

4reactions

jiayihucommented, Feb 28, 2017

I’d like to make a PR if there is confirm that this behaviour is something acceptable for the team of ng-bootstrap. Destroying components/DOM is causing some issues whenever the content of the tab/panel is something not trivial, such as a form, because you loose the state.

Other libs like primeng support this behaviour for the same reasons.

EDIT: I made a PR https://github.com/ng-bootstrap/ng-bootstrap/pull/1347

0reactions

AlexKhymenkocommented, Mar 1, 2017

Super useful. I have use case when you should add green or red circle depending if form inside of tab valid or not. Can’t do it on initial load if there is no component 😃

Top Results From Across the Web

Can't access my component reference within inactive ngb-tabset

If you add [destroyOnHide]="false" to the ngb-tabset that will prevent Angular destroying a tab when it is hidden (source: NgbTabset docs )

Navs - Bootstrap

nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin. Active; Link; Link; Disabled.

ng-bootstrap 5 tabs active Code Example

Add a Grepper Answer. Queries related to “ng-bootstrap 5 tabs active”. ngb-tabset ... ng-bootstrap tab active · how to use ngb-tabset in angular...

angular/angular - Gitter

I have a route Matcher implementation to dynamically match routes, for these routes i want to pass in an object to the data...

cliche - OSCHINA - 中文开源技术交流社区

Since strings are immutable, each concatenation should create a new string ... $('#element').tooltip('hide') Destroy: .tooltip('destroy') 隐藏并销毁元素的 ...