1

I would like tabs to be highlighted for multiple links. I'm not sure if I misunderstood the functionality. following is my code.

<div class="row">
  <div class="col-12">
    <nb-card size="small">
      <nb-route-tabset [tabs]="tabs" fullWidth activeLinkOptions="{exact:
    false}"></nb-route-tabset>
    </nb-card>
 </div>
</div>

My component: 

  tabs: any[] = [
  {
    title: 'Contacts',
    route: '/addressbook/contact',
    icon: 'person-outline',
    responsive: true, 
  },
  {
    title: 'Companies',
    route: '/addressbook/company',
    icon: 'people-outline',
    responsive: true, 

  },
  {
    title: 'Company Types',
    route: '/addressbook/companytype/index',
    icon: 'grid-outline',
    responsive: true, 
  },
];

Rendered html:

<li _ngcontent-eap-c56="" class="route-tab responsive ng-star-inserted" routerlinkactive="active" tabindex="0" ng-reflect-router-link="/addressbook/companytype/index" ng-reflect-router-link-active-options="{exact:
    false}" ng-reflect-router-link-active="active">

I was hoping that "Company Types" tab would be highlighted whenever I visit "/addressbook/companytype/create" as well. is this the expected behavior with "exact:false"?

Any help would be greatly appreciated!

ecasper
  • 489
  • 1
  • 10
  • 30
  • 1
    You could add a path in your Angular router to do a redirect to the appropriate tab url. – Jason White Jan 03 '20 at 12:59
  • I can navigate to both paths without an issue. i.e. '/addressbook/companytype/index' and '/addressbook/companytype/create'. but "Company Types" tab gets highlighted only when I navigate to '/addressbook/companytype/index'. My understading was that it should be highlighted for both paths by setting "exact:false". ?? – ecasper Jan 03 '20 at 16:44
  • 1
    The way your routing is setup could affect this. Can you put together a stackblitz of the basic routing you have setup. Nebular has a stackblitz seed https://stackblitz.com/github/akveo/nebular-seed – Jason White Jan 03 '20 at 17:23
  • Thank you! the code in your question was enough to solve my problem :D – Rami Alloush Jul 13 '20 at 05:38

1 Answers1

2

Jason's comment above to try it on stackblitz helped me to understand the usage of activeLinkOptions. My two URLs are as follows.

"/addressbook/companytype/Index" - Parent "/addressbook/companytype/create" - Child

As you can see the child is not inherited from the parent. so it didn't work. now changed the URLs to look like below which worked well.

"/addressbook/companytype" - Parent "/addressbook/companytype/create" - Child

ecasper
  • 489
  • 1
  • 10
  • 30