How to prevent angular routing when I click a bootstrap tab link?

Question

I am trying to make a bootstrap tab. The problem is when I click the tab links angular is doing it's own routing and taking me to different route. I want the tab content to be opened not jump to different route.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#basic" aria-controls="basic" target="_self" role="tab" data- 
        toggle="tab">Vehicle</a>
    </li>
    <li role="presentation">
        <a href="#photos" aria-controls="photos" role="tab" target="_self" data-toggle="tab">Photos</a>
    </li>
</ul>

When I click the Photos link angular changes the route and takes me to different component rather than showing me the Vehicle tab content.

You should not use href with angular. It will reload the entire page every time you click. To implement router Read the doc:angular.io/guide/router — Chellappan வ
– Chellappan வ, Commented Feb 6, 2019 at 7:04

Karan · Accepted Answer · 2019-02-06 07:09:22Z

2

replace href with data-target as below. Hopefully it will work.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a data-target="#basic" aria-controls="basic" target="_self" role="tab" data-toggle="tab">Vehicle</a>
    </li>
    <li role="presentation">
        <a data-target="#photos" aria-controls="photos" role="tab" target="_self" data-toggle="tab">Photos</a>
    </li>
</ul>

answered Feb 6, 2019 at 7:09

Karan

12.7k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to prevent angular routing when I click a bootstrap tab link?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related