Ngx-bootstrap: dynamic tabs are duplicated if component updates items

[JanEggers]

Hi im having problems creating a dynamic tabs control that is able to update.

i have a repro repository here:

https://github.com/JanEggers/Repro/

and the component is

/master/src/Repro/ClientApp/app/home/home.component.ts

the issue is every time i update the array of items the tabs are bound to the dynamic tabs are duplicated.

when i look at it with augury the tabs property of the tabsetcomponent has the wrong count.
the number of tab elements seems correct but the number of spans in the ul is too high.

[JanEggers]

may be related to #1615

[avilon74]

I see the same issue. updating the list of tabs to a newly created array , generates a new list of tabs without clearing the old tabs.

Also a second issue is that if the html child component of tabs has its own tabset / tabs the parent html shows the child tabs. this should not be the case ...

[valorkin]

yes, it is duplicate
and it came from fixing another issue >.<

[JanEggers]

@valorkin can u please elaborate? duplicate of what, what issue was fixed will the problem be solved?

[valorkin]

Yes, it will. There are similar issue because of same reason, so to not mess up I closing duplicated issues

[Flood]

@valorkin : Can you please reference a similar issue so I can subscribe. I'm experiencing the same issue and blocks our AoT/Rollup implementation. The error does not exist for tabs on version 1.1.5

[cyberbobjr]

Hi, i have the same error too, i use the version 1.3.3 of ng2-bootstrap, please can you explain me the fix ?
Many thanks for your help,
Best regards

[saifaustcse]

After implementing AoT with Webpack I'm experiencing the same issue... I am using the version "ng2-bootstrap": "1.3.4",

[JanEggers]

@valorkin as this issue is still present in 1.6.3 i had a look at the issue myself.

i was able fix the problem by overriding TabDirective, key was a missing OnDestroy callback.

i will create a pr

[valorkin]

And this will get back another issue :(
Can you update a code in a safe way,
If tabset ...
Plus update removeTab method, to be safer?

[JanEggers]

i found the comments in the history so the issues are #696 and #610 which are both tied into automatic selection handling.

my thoughts on this:

a: be able to opt out of automatic selection process.

b: remove automatic selection entirely as there are other edge cases like resorteing tabs where a selected item is removed and then added again which would break selection

i tend to implement [a] because b is a little to radical and might make simpler usecases more complicated

[JanEggers]

i updated the pr

selection change during remove can now be opted out. and it is opted out by default if the tabset is destroyed or the tabs get updated by databinding. if a tab is removed using the removetab method the caller can chose wether to reselect or not

[wgrabowski]

I've encountered this error using ngx-bootstrap 1.6.6. I don't understand why this issue is closed. If it is a duplicate, please provide ID of duplicated item so we can track progress on fixing this error.

[Dimanoid]

So in which version it was fixed? 1.7.1 and 2.0.0-beta2 still have the bug.