Routing setup for ngbNav bootstrap Angular tabs

user_7613573 0
Viewed 1984

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: '', component: PostsComponent},
  {path: 'posts', component: PostsComponent},
  {path: 'posts/:id', component: PostComponent},
  {path: 'posts/:id#one', component: Tab1Component},
  {path: 'posts/:id#two', component: 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.com/github/dedn/ngbNavAngular

angular-routing angular typescript javascript
2 Answers

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

component:

@Component({
  selector: 'app-credit-card',
  templateUrl: './credit-card.component.html',
  styleUrls: ['./credit-card.component.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);
    });
  }
}

component 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',
    component: CreditCardComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'personal'
      },
      {
        path: 'personal',
        component: PersonalDetailsFormComponent
      },
      {
        path: 'identification',
        component: IdentificationFormComponent
      },
      {
        path: 'address',
        component: AddressFormComponent
      }
    ]
  }
user_5975020

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

component 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.

user_69043430
Related