Allow component routing for NgbTabset

Bug description:

I’d like to load different components using the tab set. These components should be accessed by their URL. Currently, I see two ways of achieving this:

1. Provide a link with a routerLink in the ngbTabTitle template
2. Use the tabChange event and tell the router to navigate.

Option 1 has the drawback that routing only happens if the title is clicked (not the tab)

Option 2 doesn’t allow for copying the link when hovering it

While both options may achieve the desired result, I think there should be a better way (e.g., without adding an empty ngbTabContent template).

Link to minimally-working plunker that reproduces the issue:

See links provided for Option 1 and 2.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.x

ng-bootstrap: 1.0.0-alpha.26

Bootstrap: v4.0.0-alpha.6

[chuckconway]

I second this issue.

[rtvalluri]

Quick fix :

Incase you are using ng-template for routerlink like below :

<ngb-tabset #tabset="ngbTabset"> <ngb-tab id="tab1"> <ng-template ngbTabTitle> <a class="btn-link" [routerLink]="['./nestedRoute1']">Tab1</a> </ng-template> </ngb-tab> <ngb-tab id="tab2"> <ng-template ngbTabTitle> <a class="btn-link" [routerLink]="['./nestedRoute2']">Tab2</a> </ng-template> </ngb-tab> </ngb-tabset>

And facing problem like routing only happens if the title is clicked (not the tab), try removing padding for the outer anchor tag and make the inner anchor tag i.e btn-link in the above code as inline-block and provide padding to it.

Thus any click on the tab will correspond to inner anchor tag with router link.