Kendo UI for Angular - How to make PanelBar select based on the current route

Question

I'm trying to use PanelBar from KendoUI for my Angular app navigation. Once you are on the page and use it for navigation it works just fine with router links. However if I go directly to a link it doesn't work. For example if I go to http://localhost:4200/licenses then the panel bar shows nothing selected, but if I go to just http://localhost:4200/ then click on the licenses portion it goes there and shows it selected. How can I get it to show selected whenever I'm on that URL regardless of if it was navigated from in the page or from an external link?

Here is my navigation component code:

<kendo-panelbar>
  <kendo-panelbar-item title="Company Info" routerLink="/companydata"></kendo-panelbar-item>
  <kendo-panelbar-item title="Licenses" routerLink="/licenses"></kendo-panelbar-item>
  <kendo-panelbar-item title="Users" routerLink="/users"></kendo-panelbar-item>
  <kendo-panelbar-item title="Keynote Projects" routerLink="/knprojects" style="margin-bottom: 1em"></kendo-panelbar-item>
  <kendo-panelbar-item title="View Keynotes" expanded="true">
    <kendo-panelbar-item *ngFor="let project of Projects" title="{{ project.Name }}" routerLink="/knprojects/{{ project.ID }}"></kendo-panelbar-item>
  </kendo-panelbar-item>
</kendo-panelbar>

I also tried using the [selected] binding but when I did that it didn't show any selection regardless of where it came from...

Answer 1

There is an Angular routerLinkActive propery to solve this issue. It is using with routerlink and it means add some class to property if router link is active.

If your active class is "active" just add it to your example:

<kendo-panelbar>
  <kendo-panelbar-item routerLinkActive = "active" title="Company Info" routerLink="/companydata"></kendo-panelbar-item>
  <kendo-panelbar-item routerLinkActive = "active" title="Licenses" routerLink="/licenses"></kendo-panelbar-item>
  <kendo-panelbar-item routerLinkActive = "active" title="Users" routerLink="/users"></kendo-panelbar-item>
  <kendo-panelbar-item routerLinkActive = "active" title="Keynote Projects" routerLink="/knprojects" style="margin-bottom: 1em"></kendo-panelbar-item>
  <kendo-panelbar-item routerLinkActive = "active" title="View Keynotes" expanded="true">
    <kendo-panelbar-item routerLinkActive = "active" *ngFor="let project of Projects" title="{{ project.Name }}" routerLink="/knprojects/{{ project.ID }}"></kendo-panelbar-item>
  </kendo-panelbar-item>
</kendo-panelbar>