title: Angular routing with dynamic tabs
body: <p>I'm trying to create an angular application that support dynamic tabs with routing.
  I found this great starting point here
  <a href="https://technology.amis.nl/2019/07/05/dynamic-tabs-with-angular-6-and-ng-bootstrap/" rel="nofollow noreferrer">https://technology.amis.nl/2019/07/05/dynamic-tabs-with-angular-6-and-ng-bootstrap/</a></p>
  
  <p>The problem with the above solution is that when a tab is hidden the content component is destroyed.</p>
  
  <p>It is required to have the component hidden, and not destroyed when switching tabs, in order to retain the component state.</p>
  
  <p>Setting the destroyOnHide attribute on the ngb-tabset causes multiple router-outlet to be present, and does not work.</p>
  
  <p>One way to retain the state, and have the top level work as expected was to bypass to remove the router-outlet</p>
  
  <pre><code>      &lt;ngb-tab *ngFor="let tab of tabs ; let index = index" [id]="tab.url"&gt;
            &lt;ng-template ngbTabTitle&gt;
                &lt;span&gt;{{tab.name}}&lt;/span&gt;
                &lt;span (click)="closeTab(index, $event)"&gt;&amp;times;&lt;/span&gt;
            &lt;/ng-template&gt;
            &lt;ng-template ngbTabContent&gt;
                &lt;ng-container *ngIf='tab.url =="/movies"'&gt;
                    &lt;app-movies&gt;&lt;/app-movies&gt;
                &lt;/ng-container&gt;
                &lt;ng-container *ngIf='tab.url &amp;&amp; tab.url.startsWith("/songs")'&gt;
                    &lt;app-songs&gt;&lt;/app-songs&gt;
                &lt;/ng-container&gt;
            &lt;/ng-template&gt;
        &lt;/ngb-tab&gt;
    &lt;/ngb-tabset&gt;
  </code></pre>
  
  <p>This works for the top level tabs, but prevent nested routing from working, eg [routerLink]='/songs/1' won't work.</p>
  
  <p>Attempts to use secondary routing also failed.  Short of manual handling of routers event, I couldn't see a way forward.   Any suggestions is appreciated.</p>