CODEWITHSUNDEEP
cssangulartypescript
kapiljain123
kapiljain123

Reputation: 159

How can i make nav bar highlighted in angular2?

I want to make navbar active for this i am using css but when i am going to refresh page active tab is going to remove how can i do this in angular 2?

 HTML:--


<ul class="nav navbar-nav navbar-top "
                    *ngFor="let menu of menus">
                    <li><a href="" (click)="goToPage($event)">{{menu}}
                    </a>
                    </li>
                </ul>

css:--

navigation a:FOCUS {
    box-shadow: 0 -5px 0 -4px #eee;
    color: #ffffff;
    width:30%
}

.navigation a:HOVER {
    box-shadow: 0 -5px 0 -4px #eee;
    color: #ffffff;
    width:30%
}

Upvotes: 2

Views: 1093

Answers (2)

micronyks
micronyks

Reputation: 55443

<ul class="nav navbar-nav navbar-top" *ngFor="let menu of menus">
     <li>
         <a routerLink="menu"  routerLinkActive="active">{{menu}}</a>
     </li>
</ul>

Upvotes: 2

Stefan Svrkota
Stefan Svrkota

Reputation: 50633

You can use routerLinkActive to add some css to your active route, for example:

<a routerLink="login" routerLinkActive="active-class">Login</a>

Upvotes: 2

Related Questions