NgbNav wont work with dynamic tabs loaded from Http-Request

[RootProgger]

Bug description:

I want to use ngbNav to generate a dynamic Navigation. The Tabs renders fine, but the Content was never showed.

I forked the basic-example and create one example with dynamic tabs that is working, but with initialised array of tabs and one with an api-call:

https://stackblitz.com/edit/angular-57365j?

Angular: 10.0.14

ng-bootstrap: 8.0.0

[jnizet]

Hi.

I don't have a fix, but I have a workaround, that is probably cleaner anyway: only dsplay all the nav markup once you have the data needed to display them: https://stackblitz.com/edit/angular-57365j-bbfgdu?file=src%2Fapp%2Fnav-basic.html

<ng-container *ngIf="dynamicTabs | async as tabs">
  <!-- all the navs markup here, using tabs -->
</ng-container>

[RootProgger]

@jnizet thanks, that looks great. i just wanted to test it when i call a syncronous request instead of async. but this looks very good. many thanks and merry christmas.

[jnizet]

If you don't mind, I will reopen this, because I think there's an issue here, and your original code should work (even though I would still use my version)

[maxokorokov]

It doesn't work with 7.0.0 either → https://stackblitz.com/edit/angular-57365j-mbvbrz
It works only after you click on a nav, so looks like the active nav is not set correctly when nav items go from 0 navs to n
With 8.0.0 it doesn't work even after the click, because css classes are not set correctly on top of this...

[maxokorokov]

Ok, this was fixed by #3909 in 8.0.1, but there is still something you need to do.

When you render n > 0 navs for the first time and don't specify activeId, we assign it automatically to the first tab, but only for the first time. For all subsequent changes to the nav collection, we have no idea what your intentions are, so it's up to you to update activeId when you change the nav collection dynamically.

Ex. you remove programmatically the nav that is currently active. What should we do? Select the first one? Previous one? next one? We've decided to do nothing. See this demo for the illustration

In your example even with the rendering bug fixed in 8.0.1, you still have to update activeId manually.
First time you're rendering 0 navs, so activeId stays undefined.
Then your response arrives and navs move 0 → n, but activeId will stay undefined.
It's up to you to update it → https://stackblitz.com/edit/angular-57365j-mzbntb?file=src%2Fapp%2Fnav-basic.ts

this.dynamicTabs = this.http.get(this.url).pipe(tap(tabs => {
  this.active2 = tabs[2].id;
}));

This also explains how the workaround by @jnizet works. And frankly I'd probably use his workaround for UX reasons and show something like loading... template instead of empty navs.

[maxokorokov]

Fixed by #3909