Switch and persist selected tab of ng2-bootstrap , using Angular router

Question

I have a component showing tabs using ng2-bootstrap tabset and tab.

Example:

<tabset>
    <tab heading="Info" [active]="tabs[0].active">
        <account-data *ngIf="tabs[0].active"></account-data>
    </tab>
    <tab heading="Users" [active]="tabs[1].active">
        <manage-users *ngIf="tabs[1].active"></manage-users>
    </tab>
    <tab heading="Billing" [active]="tabs[2].active">
        <account-billing *ngIf="tabs[2].active"></account-billing>
    </tab>
</tabset>

Note: tabs[N].active is controlled by the component and already syncs tab-changes and routes. But I have the feeling that I'm doing it the wrong way, because it's hard to manage routing inside the selected tab. Let's take the second tab, at the end of the day it should manage following sub-routes:

.../users          -> provide list of users
.../users/new      -> create new user
.../users/:id      -> show a particular user
.../users/:id/edit -> edit a particular user

It's not easy, because the component showing the tabs already uses this route:

.../:tab

It'd be way easier if there was something like this:

<tabset>
    <tab heading="Info" [routerLink]="['info']"></tab>
    <tab heading="Users" [routerLink]="['users']"></tab>
    <tab heading="Billing" [routerLink]="['billing']"></tab>
</tabset>
<router-outlet></router-outlet>

Has anybody a solution for this? This problem should be quite common...

score 8 · Answer 1 · answered Jan 19 '17 at 16:08

8

I've solved this on my own this (easy) way completely without ng2-bootstrap, just native bootstrap CSS classes, routerLink and routerLinkActive:

  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link"
         routerLinkActive="active"
         [routerLink]="['info']">Info</a>
    </li>
    <li class="nav-item">
      <a class="nav-link"
         routerLinkActive="active"
         [routerLink]="['users']">Users</a>
    </li>

    ...

  </ul>
  <div class="tab-content">
    <div class="tab-pane active">
      <router-outlet></router-outlet>
    </div>
  </div>

answered Jan 19 '17 at 16:08

hgoebl

12,637
9
49
72

Thanks, I did the same. I think I will drop ng2-bootstrap from my app and use 'vanilla twitter bootstrap'. – Christian Benseler Mar 09 '17 at 16:46
2

We keep `ng2-bootstrap` in the project. There are a lot of valuable modules like AlertModule, DropdownModule, PaginationModule, TooltipModule, TypeaheadModule, ModalModule, DatepickerModule. And one can use the TabsModule for simple non-router navigation. – hgoebl Mar 09 '17 at 20:52

Mathers · Answer 2 · 2017-03-23T05:25:44.500

4

Hey I have figured out a way to solve this. try the following:

        <tabset class="nav nav-tabs">
            <tab>
                <template tabHeading>
                    <a class="routing_link" routerLink="/dashboard">Dashboard</a>
                </template>
            </tab>
            <tab>
                <template tabHeading>
                    <a class="routing_link" routerLink="/execution">Execution</a>
                </template>

            </tab>
            <tab>
                <template tabHeading>
                    <a class="routing_link" routerLink="/history">History</a>
                </template>
            </tab>
        </tabset>

Edit

<div class="col-lg-12">
<tabset class="nav nav-tabs">
        <tab>
            <template tabHeading>
                <a class="routing_link" routerLink="/dashboard">Dashboard</a>
            </template>
        </tab>
        <tab>
            <template tabHeading>
                <a class="routing_link" routerLink="/execution">Execution</a>
            </template>
        </tab>
        <tab>
            <template tabHeading>
                <a class="routing_link" routerLink="/history">History</a>
            </template>
        </tab>
    </tabset>
</div>
<div class="col-lg-12">
    <router-outlet></router-outlet>
</div>

edited Mar 23 '17 at 05:25

answered Mar 21 '17 at 20:19

Mathers

184
9

Thanks. Where do you place the ``? Seams your code just renders the tab headers, or have I missed something? – hgoebl Mar 22 '17 at 07:49
My `` is right underneath it. Please see update – Mathers Mar 23 '17 at 05:18
I'll give it a try next time. Without seeing it in action - your solution seams not to mark the active tab when route changes, does it? – hgoebl Mar 23 '17 at 07:17
It will change. You can give a try with it. Once you click on it, the tab will become active. – Mathers Mar 23 '17 at 19:39
2

When you click on it, then it will become active - that's clear, yes. But I suppose it won't become active when you route to the link. – hgoebl Mar 24 '17 at 07:11

Switch and persist selected tab of ng2-bootstrap , using Angular router

2 Answers2