Used by ngbNav to implement tabs on the project link to the doc

There was a need to add routes for tabs, I used an example from the docks, but I could not configure the operation of the routes. What could be the reason?

routes: Routes = [
  {path: '', ponent: PostsComponent},
  {path: 'posts', ponent: PostsComponent},
  {path: 'posts/:id', ponent: PostComponent},
  {path: 'posts/:id#one', ponent: Tab1Component},
  {path: 'posts/:id#two', ponent: Tab2Component},
]

For the "posts/:id#one" and "posts/:id#two" route, no reaction occurs.

It’s not suitable to use the router module at all, I need the ability to add resolvers and guards for the route

link to an example implementation

Used by ngbNav to implement tabs on the project link to the doc

There was a need to add routes for tabs, I used an example from the docks, but I could not configure the operation of the routes. What could be the reason?

routes: Routes = [
  {path: '', ponent: PostsComponent},
  {path: 'posts', ponent: PostsComponent},
  {path: 'posts/:id', ponent: PostComponent},
  {path: 'posts/:id#one', ponent: Tab1Component},
  {path: 'posts/:id#two', ponent: Tab2Component},
]

For the "posts/:id#one" and "posts/:id#two" route, no reaction occurs.

It’s not suitable to use the router module at all, I need the ability to add resolvers and guards for the route

link to an example implementation https://stackblitz./github/dedn/ngbNavAngular

• javascript
• angular
• typescript
• angular-routing

• Ever find a solution to this? Running into same issue. – Josh Werts Commented May 6, 2021 at 14:38

2 Answers 2

I solved this pretty easily by listening to url changes on the routes child.

ponent:

@Component({
  selector: 'app-credit-card',
  templateUrl: './credit-card.ponent.html',
  styleUrls: ['./credit-card.ponent.scss']
})
export class CreditCardComponent implements OnInit {

  @ViewChild(NgbNav, {static: true})
  ngbNav: NgbNav;

  links = [
    { title: 'Personal Details', route: 'personal' },
    { title: 'Identification', route: 'identification' },
    { title: 'Address', route: 'address' }
  ];

  constructor(public route: ActivatedRoute) { }

  ngOnInit(): void {
    // subscribe to child url segments
    this.route.firstChild.url.subscribe((url) => {
      // get url path
      const urlPath = url[url.length - 1]?.path;
      // select/set active tab
      this.ngbNav.select(urlPath);
    });
  }
}

ponent html:

<div class="row">
  <div class="col-lg-2">
    <ul ngbNav class="nav-pills flex-column">
      <li [ngbNavItem]="link.route" *ngFor="let link of links">
        <a ngbNavLink [routerLink]="link.route">{{ link.title }}</a>
      </li>
    </ul>
  </div>
  <div class="col-lg-10">
    <router-outlet></router-outlet>
  </div>
</div>

router module:

{
    path: 'creditcard',
    ponent: CreditCardComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'personal'
      },
      {
        path: 'personal',
        ponent: PersonalDetailsFormComponent
      },
      {
        path: 'identification',
        ponent: IdentificationFormComponent
      },
      {
        path: 'address',
        ponent: AddressFormComponent
      }
    ]
  }

If you are a total beginner like me and you want to use absolute routes in the

ponent template

<div class="row">
  <div class="col-lg-2">
    <ul ngbNav [activeId}=selectedTab class="nav-pills flex-column">
      <li [ngbNavItem]="'customers'" *ngIF="!!allowedCustomers">
        <a ngbNavLink [routerLink]="'customers'">{{ link.title }}</a>
      </li>
      <li [ngbNavItem]="'orders'" *ngIF="!!allowedOrders">
        <a ngbNavLink [routerLink]="'orders'">{{ link.title }}</a>
      </li>
    </ul>
  </div>
  <div class="col-lg-10">
    <router-outlet></router-outlet>
  </div>
</div>

you might/have to use single qotes inside double quotes to get it working. This just took like 2-3h or so of my time, because in the documentation and examples of ngb it is not shown like this.