title: How to use Ng-Bootstrap Nav with Child components as tabs?
body: <p>I'm using the <strong><a href="https://ng-bootstrap.github.io/#/components/nav/overview" rel="nofollow noreferrer">Nav</a></strong> Component from <a href="https://ng-bootstrap.github.io/" rel="nofollow noreferrer">Angular Bootstrap</a> which is used like this (from the official examples):</p>
  <pre class="lang-html prettyprint-override"><code>// Working Official Example:
  &lt;ul ngbNav #nav=&quot;ngbNav&quot; [(activeId)]=&quot;active&quot; class=&quot;nav-tabs&quot;&gt;
  
    &lt;li [ngbNavItem]=&quot;1&quot;&gt;
      &lt;a ngbNavLink&gt;One&lt;/a&gt;
      &lt;ng-template ngbNavContent&gt;
        &lt;p&gt;Content for One&lt;/p&gt;
      &lt;/ng-template&gt;
    &lt;/li&gt;
  
    &lt;li [ngbNavItem]=&quot;2&quot;&gt;
      &lt;a ngbNavLink&gt;Two&lt;/a&gt;
      &lt;ng-template ngbNavContent&gt;
        &lt;p&gt;Content for Two&lt;/p&gt;
      &lt;/ng-template&gt;
    &lt;/li&gt;
  
    // etc...
  &lt;/ul&gt;
  
  &lt;div [ngbNavOutlet]=&quot;nav&quot; class=&quot;mt-2&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>But having large amounts of content in the same file makes it long and cluttered, so I want to put the Nav tabs inside a <strong>child component</strong>. I've tried this but it doesn't work:</p>
  <pre class="lang-html prettyprint-override"><code>// What I want to achieve:
  &lt;ul ngbNav #nav=&quot;ngbNav&quot; [(activeId)]=&quot;active&quot; class=&quot;nav-tabs&quot;&gt;
  
    &lt;tab-section-1&gt;&lt;/tab-section-1&gt;
  
    &lt;tab-section-2&gt;&lt;/tab-section-2&gt;
  
    // etc...
  &lt;/ul&gt;
  
  &lt;div [ngbNavOutlet]=&quot;nav&quot; class=&quot;mt-2&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p><strong>Child component:</strong></p>
  <pre class="lang-html prettyprint-override"><code>// tab-section-1
  &lt;li [ngbNavItem]=&quot;1&quot;&gt;
    &lt;a ngbNavLink&gt;One&lt;/a&gt;
    &lt;ng-template ngbNavContent&gt;
      &lt;p&gt;Content for One&lt;/p&gt;
    &lt;/ng-template&gt;
  &lt;/li&gt;
  </code></pre>
  <p>But it's not working :(</p>
  <p>Changing between tabs work wonderfully and even the tab titles show up. But the tab <em>content</em> isn't rendered, most likely because it's <code>&lt;ng-template&gt;</code> and is rendered by ng-bootstrap in another div.</p>
  <p>I've searched far and wide but found naught! Thanks ⭐</p>