TabMenu item not highlighted on navigation

[rekna1]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-mzxm71?file=src/app/app.component.ts
https://github-mzxm71.stackblitz.io/tabtwo

Current behavior
if one navigates to https://github-mzxm71.stackblitz.io/tabtwo, the tabtwo menuitem is not highlighted

Expected behavior
I expect tabtwo to be highlight in the tabmenu, corresponding the documentation :
By default item that matches the active route is highlighted,

Minimal reproduction of the problem with instructions
enter the following url in the browser adressbar
https://github-mzxm71.stackblitz.io/tabtwo
The content of tabtwo is correctly displayed, but none of the tabMenu items are highlighted.

What is the motivation / use case for changing the behavior?
Since it does not behave like doc's say, it's a bug.

Please tell us about your environment:

• Angular version:
  stackblitz current version

• PrimeNG version:
  stackblitz current version

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome , firefox

• Language: [ TypeScript ]

• Node (for AoT issues): node --version =
  N/A

[rekna1]

apparently, it seems like a css problem:

when you click on a tabmenuitem, the html structure is (mind p-highlight class on li)

<li role="tab" class="ng-star-inserted p-tabmenuitem p-highlight">
	<a class="p-menuitem-link p-ripple ng-star-inserted p-menuitem-link-active"
</li>

which makes following rule appy

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
    background: #ffffff;
    border-color: #2196F3;
    color: #2196F3;
}

when a tabmenuitem is active due to routing alone the html structure is (and so the above rule is not applied because p-highlight is missing on the li element)

<li role="tab" class="p-tabmenuitem">
	<a class="p-menuitem-link p-ripple p-menuitem-link-active" 
</li>

adding this css seems to fix it, however, not sure this is the right solution

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link.p-menuitem-link-active {
  background: #ffffff;
  border-color: #2196F3;
  color: #2196F3;
}

update: apparently it does not completely fix the problem in the following situation

• click on second tab menu item (it becomes active)
• activate first tab menu item (using routing, not be clicking) then 2 tab menu items are visually active, because routing does not remove p-highlight class on second tab menu item

P.S. initially I tried to solve it by manipulating activeItem... however after thinking about it, activeItem and routing probably don't mix to well. In case one uses routing, only routing should be used to set the active menuitem (correct me if I'm wrong). If this is the case it might well be worth adding this to the documentation as a remark/best practise

[tomdev9]

I have same problem ad my temporary fix is adding:

 constructor(private router: Router) { }

  ngOnInit(): void {
    if (this.model) {
      for (let index = 0; index < this.model.length; index++) {
        const item = this.model[index];
        // not the best solution how to compare, in my case routerLinks = ['/path/path2']
        if (this.router.url.indexOf(item.routerLink) != -1) {
          this.activeItem = item;
          break;
        }
      }
    }
  }

for Tabmenu component.

I try only html when u add #rla="routerLinkActive" for and then in <li 'p-highlight':activeItem==item || rla.isActive'
but this highlight only text and bottom line(inkbar) ist not visible when u first load page without clicking anything.