title: Place nav-pills in card-header and tab-content in card-body using ngbTabSet
body: <p>I'd like to place <strong>nav-pills in card-header</strong> and <strong>tab-content in card-body</strong> using <strong>ngbTabSet</strong>. But I don't get on how to do this.</p>
  
  <p>Here is a sample of what I try to achieve (using bootstrap.js)</p>
  
  <p><a href="https://i.stack.imgur.com/CIwxX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CIwxX.png" alt="Sample"></a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="card"&gt;
      &lt;div class="card-header"&gt;
          &lt;ul class="nav nav-pills" id="myTab" role="tablist"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"&gt;Profile&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="card-body"&gt;
          &lt;div class="tab-content" id="myTabContent"&gt;
              &lt;div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"&gt;Home&lt;/div&gt;
              &lt;div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"&gt;Profile&lt;/div&gt;
              &lt;div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"&gt;Contact&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is what I already tried (using ng-bootstrap)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="card"&gt;
      &lt;div class="card-header"&gt;
          &lt;ngb-tabset type="pills"&gt;
              &lt;ngb-tab title="Home"&gt;
                  &lt;ng-template ngbTabContent&gt;..&lt;/ng-template&gt;
              &lt;/ngb-tab&gt;
          &lt;/ngb-tabset&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I end up with having everything inside <strong>card-header</strong>.
  <a href="https://i.stack.imgur.com/XcqVI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XcqVI.png" alt="Sample with ng-bootstrap"></a></p>
  
  <p>Same when using template ref</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-template ngbTabContent&gt;
    &lt;ng-container *ngTemplateOutlet="template_ref"&gt;&lt;/ng-container&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>I am using <strong>bootstrap 4.0</strong>, <strong>ng-bootstrap 2.0</strong> and <strong>Angular 5.2</strong></p>
  
  <p>Anyone having an idea on how to get this working?</p>