Ngx-bootstrap: How to pass route in tabs?

[02harleen]

Hi, Code is:-

<tabset>
<tab heading = "tab1" [routerLink] = "['/profile']">
</tab>
<tab heading = "tab2" [routerLink] = "['/test']">
</tab>
<tab heading = "tab3" [routerLink] = "['/customer']">
</tab>
</tabset>

Is it possible to routerLink in tabs without using a select function?

[AinoL]

There is currently nothing that will handle the routerLink value. You can see the template at:

https://github.com/valor-software/ngx-bootstrap/blob/development/src/tabs/tabset.component.ts

[hgoebl]

@02harleen have a look at https://stackoverflow.com/questions/41726157/switch-and-persist-selected-tab-of-ng2-bootstrap-tabset-tab-using-angular-r

[JanEggers]

hi there same issue here and when using the stack overflow response only clicking right on the link works. if you click below the link the tab swiches but the route does not.

[IlyaSurmay]

@JanEggers you need to adjust for .nav-item in order to make it take 100% width and height of parent <li>

[JanEggers]

thx

[vincentjames501]

Why was this closed? This seems extremely useful.

[mariusAF]

Any news or workarounds for this ? :)

[rzubov-devpro]

Possible solution for this one:

 <tabset>
      <tab
        *ngFor="let item of items"
        (selectTab)="changeRoute(item)"
        [active]="item.id === activeTabId"
     ...
     </tab>
</tabset>

  public ngOnInit():void{
      ...
      const queryParams = (this.activatedRoute.queryParams as any).value;
      this.activeTabId = queryParams.tab;
     ...
  } 

  public changeRoute(item) {
    this.router.navigate(['.'],
      {
        queryParams: {tab: item.id},
        relativeTo: this.activatedRoute
      }
    );