0

I am using following code:

<ul class="nav navbar-nav">
    <li class=""><a routerLink="/overview" routerLinkActive="active">OVERVIEW</a></li>
    <li class=""><a routerLink="/insights" routerLinkActive="active">INSIGHTS</a></li>
</ul>

I want 'overview' to be selected by default. And also, when I click on overview or insights, respective link gets selected(with dark background css class), however, if I click away anywhere withing the application, the selection goes off. It's not retained. How can I retain the selected route's link? I am using modules to lazy load the respective content of selected li.

You can see it in action here: http://recordit.co/8wfPmEvqTs

On load, overview router will be shown, but 'overview' is not selected: https://snag.gy/vQnJKm.jpg

When I click on overview, it will get selected: https://snag.gy/PVyDIA.jpg

Now, if I click anywhere else, for example, below the nav bar, the overview's selection goes off: https://snag.gy/W5f7Pa.jpg

I am using v4.0.0. ("@angular/common": "^4.0.0")

Deepak
  • 1,038
  • 4
  • 18
  • 31
  • What do you mean by "click away anywhere..."? The point of `routerLinkActive` or even `isActive()` within is to match the "current route". So if the "route" is different then the "class" does not apply to the current element. Are the routes changing from either of these values with your "clicks"? – Neil Lunn May 10 '17 at 11:35
  • Yes, that's how ideally it should have worked, but unfortunately not working. On load, overview router will be shown, but 'overview' is not selected: https://snag.gy/vQnJKm.jpg When I click on overview, it will get selected: https://snag.gy/PVyDIA.jpg Now, if I click anywhere else, for example, below the nav bar, the overview's selection goes off: https://snag.gy/W5f7Pa.jpg – Deepak May 10 '17 at 11:44
  • "not working" is about as descriptive as "click away anywhere" and that means "not very helpful". You need to describe what exactly is not working and ideally give a minimal and reproducible case. Also take a look at `routerLinkActiveOptions`. Remember we presently cannot see what is happening here. You need to show people. – Neil Lunn May 10 '17 at 11:49
  • Hi, i have shared the screenshot in my comment above, is that helpful? – Deepak May 10 '17 at 11:51
  • http://recordit.co/7SUDmsqXJC – Deepak May 10 '17 at 12:00
  • Screenshots really don't aid here, and especially since none display the current route in the address bar along with the corresponding state change. – Neil Lunn May 10 '17 at 12:00
  • Screencast with URL: http://recordit.co/8wfPmEvqTs – Deepak May 10 '17 at 12:04

0 Answers0