Nesting ng-bootstrap tabs (Angular 2)

Question

I\'m trying to nest a ng-bootstrap tab widget, but the content of the nested tab isn\'t shown properly. The moment I click on a nested tab, the content itself disappears.

Answer 1

Update

Angular 4.3.6 contains a fix for this issue.

https://github.com/ng-bootstrap/ng-bootstrap/issues/1433#issuecomment-325104017

Previous version

It's a bug.

Possible workaround might be having additional template like:

  
    
      {{ tab.title }}
    
    
      {{ tab.content }}
      
    
  




  
    
      
        1
      
      
        1
      
    
    
      
        2
      
      
        2
      
    
    
      
        3
      
      
        3
      
    
  

Plunker Example

And you can generate any number of nested tabs like:

  
    
      
        {{ tab.title }}
      
      
        {{ tab.content }}
        
          
        
      
    
  

Plunker Example

It works because each of embedded template has its own scope and angular doesn't mix query results