How can I set routerLinkActive on listview?

Question

I am using ejs-listview in an Angular application as a list of menu items. When I select an item on the listview it renders the component as per the route. When I select an item, there is a .e-active class added to the list item, which I can use to apply styles. But, when I click the back button on the browser the list item active doesn't update as per the route. It's still active on the same item.

How can I bind the .e-active class to the routerLink, so that the item selected is based on the route?

Here is a stackblitz to explain this. In the app, I am trying to apply the routerLinkActive to the list-item but it applies it to the child of <li>. I want the routerLinkActive on the <li> element itself.

https://stackblitz.com/edit/angular-sezclv-fdnt5c?file=src%2Fapp%2Fapp.component.html

. I want the routerLinkActive on the

element itself.https://stackblitz.com/edit/angular-sezclv-fdnt5c?file=src%2Fapp%2Fapp.component.html

Indhumathy Loganathan · Answer

Hi Amarender,Greetings from
Syncfusion support.The ListView Template
support used to customize the list content details not the list element. So,
you can’t apply routerLinkActive directly to the list element. However, while
navigating back in the browser you can able to remove the “e-active”
class added in the list element. Check out the code snippet below.

this.router.events.subscribe((event)
  => {
   
  if (event instanceof NavigationEnd && event.url == '/')
  {
   
    setTimeout(() => {
   
      //Get the active element.
   
      var element =
  document.getElementsByClassName('e-active')[0];
   
      if (element != null)
  {
   
        //Remove the class name.
   
        element.classList.remove('e-active');
   
      }
   
    }, 100);
   
  }
  });

Sample: https://stackblitz.com/edit/angular-sezclv-zhbjg1?file=src%2Fapp%2Fapp.component.tsCheck out the shared
sample and get back to us if you need any further assistance.Regards,Indhumathy L