How can I set routerLinkActive on listview?

[Amarender Tangella]

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

[Indhumathy Loganathan]

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.ts

Check out the shared sample and get back to us if you need any further assistance.

Regards,

Indhumathy L