Ng-sidebar first nav item always focused on page refresh

Question

I am trying to build a sidenav for my application with ng-sidebar, but I am stuck on an issue where the first item in the nav will always be focused on page reload/refresh.

This is my HTML:

<ng-sidebar-container style="height: 100vh; width: 10vw;">
    <ng-sidebar class="sidebar" [opened]="opened" position="left" [autoFocus]="false">
        <ul ngbNav #nav="ngbNav" class="nav-pills" style="display: block;">
            <li [ngbNavItem]="1"><a ngbNavLink [ngClass]="{active: isActive(['/dashboard'], true)}"
                                    [routerLink]="'/dashboard'">Dashboard</a> </li>
            <li [ngbNavItem]="2"><a ngbNavLink [ngClass]="{active: isActive(['/orders'], true)}" [routerLink]="'/orders'">Orders</a> </li>
            <li [ngbNavItem]="3"><a ngbNavLink [ngClass]="{active: isActive(['/test'], true)}" [routerLink]="'/test'">Test</a> </li>
        </ul>
    </ng-sidebar>
</ng-sidebar-container>

And this is the typescript:

export class SideNavComponent implements OnInit {

  opened = true;

  constructor(private router: Router) {}

  ngOnInit() {}

  isActive(currentRoute: any[], exact = true): boolean {
    return this.router.isActive(this.router.createUrlTree(currentRoute), exact);
  }

}

I have tried using routerLinkActive with [routerLinkActiveOptions]="{exact: true}" aswell, but it will always focus on "dashboard" when reloading.

Any suggestions on how to fix this issue?

Example image where only "Test" tab should be highlighted, but Dashboard is still focused:

Answer 1

likely a bit late to answer this for you -- anyone else coming across this, just make sure to set the activeId attribute on the ngbNav element, as it seems that by default(?), the first link is selected if the attribute is unknown;

if you use children-based routing, using activeId="rubbish-that-doesnt-exist" will work just as well.