CODEWITHSUNDEEP
twitter-bootstrapangularangular2-routingnav
Protagonist
Protagonist

Reputation: 1669

How to set Bootstrap navbar selected to be “active” class in Angular 2 RouterModule?

I have a sidenav bar with some tabs 

<div class="side-wrap-div">
        <div class="list-group sidebar-nav">
            <li class="list-group-item borderBottomMenu active" >
                <a href="#/{{ DocumentURL }}">Document</a>
                <span class="marker-logo"></span>
                <span class="logo document-logo-click" ></span>
            </li>
        </div>
        <div class="list-group bottom-fixed">
            <div  id="collapse3" *ngIf="showContact">
                <a href="#/contact/{{ currentTaskId }}" class="panel-collapse list-group-item collapse">
                    <span class="logo contact-logo" ></span>Contact
                </a>
        </div>
    <div>

How to set the navbar selected to be active? I'm using RouterModule(not [routerLink]) and have declared my routing in app.routing.ts.

Upvotes: 0

Views: 2398

Answers (1)

inwi
inwi

Reputation: 129

It works for me by using

<a class="nav-link" routerLink="my-route" routerLinkActive="active">My Route</a>

routerLinkActive="active" will add the "active" class to the <a> element.

Found it there: Router directives

You might have to use defined routes, described here Define routes.

Upvotes: 6

Related Questions