How can i make nav bar highlighted in angular2?

Question

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%
}

How do you go to a particular page? using which functionality? are you using angular router? — micronyks
– micronyks, Commented Sep 12, 2016 at 18:13

Stefan Svrkota · Accepted Answer · 2016-09-12 18:19:23Z

2

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

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

answered Sep 12, 2016 at 18:19

Stefan Svrkota

50.8k10 gold badges100 silver badges88 bronze badges

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

1 Comment

kapiljain123 Over a year ago

Here in place of login i am using some dynamic property like<a>{{menu}}</a> is that a correct way to bind this routerLink="{{menu}}"?please suggest.

micronyks · Accepted Answer · 2016-09-12 18:33:18Z

2

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

answered Sep 12, 2016 at 18:33

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

6 Comments

kapiljain123 Over a year ago

not getting any value on html or also in console through this:-- <a routerLink="menu" routerLinkActive="active">{{menu}}</a>

micronyks Over a year ago

seriously? just try <li>{{menu}}</li>. do you even get any value in {{menu}}?

kapiljain123 Over a year ago

yes than i am getting value but when i am going to add routerLink="menu" routerLinkActive="active" it's gone.

kapiljain123 Over a year ago

yes error is like that:---EXCEPTION: Error in ./Menu class Menu - inline template:18:64

micronyks Over a year ago

As of now, i'd suggest you to try with static route n check whether solution works. Eg. routerLink="/contacts"

|

Collectives™ on Stack Overflow

How can i make nav bar highlighted in angular2?

2 Answers 2

1 Comment

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Related