NavTabs: Don't destroy on hide but initialise only on click

Bug description:

I have a page with a lot of tabs and each one has its own reactive forms and http calls to initialise those forms. When I open a tab and go back and forth to that tab i dont want it to re-initialise since i might have some filters that i want them to stay as they are left. The input property destroyOnHide looked promising but the thing is that all tabs are initialised at the page load even if the user does not navigate to them. This results to a bad page loading time. Ideally, i want the tabs to be initialised only on select, and destroy only when the user navigates to a different url route.

Link to minimally-working StackBlitz that reproduces the issue:

I believe the description is enough but in case you have different opinion, I can provide with a demo

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 9 ng-bootstrap: 6 Bootstrap: 4

[jnizet]

You can do that pretty easily by just keeping a set of visited IDs (thanks to the activeIdChange output), and only displaying the content of a tab (thanks to *ngIf) if its ID is in the set of visited Ids.

Here’s a demo: https://stackblitz.com/edit/angular-fg9wda?file=src%2Fapp%2Fnav-keep-content.ts

[maxokorokov]

Looks like a duplicate of #1584 to me. Lazy initialization is not implemented.