0

I am using a Syncfusion sidebar and listview in an Angular Micro-Frontend application. When I select an item in the sidebar, the app is loaded on the right side and the list item has an e-active class and I can target it to apply styles. I want a way to add routerLinkActive to the list element itself. How can I do that? I don't want to apply my styles to its child element and cover the whole <li> element. You can find the below stack blitz to understand better.

I tried to add the <li> element to the <ng-template> but it adds another <li> element to the DOM.

export class AppComponent {
  @ViewChild('sidebar')
  public side: SidebarComponent;
  @ViewChild('listView') public listView: ListViewComponent;
  public urlValue: String;

  public listApps$: Observable<any[]> = of([
    {
      name: 'Go to First Page',
      path: 'firstPage',
      remoteEntry: 'http://localhost:4231/remoteEntry.js',
    },
    {
      name: 'Go to Second Page',
      path: 'secondPage',
      remoteEntry: 'http://localhost:4232/remoteEntry.js',
    },
  ]);
}
<ejs-sidebar
  id="parent-sidebar"
  #sidebar
  width="260px"
  type="Slide"
  (created)="onCreated()"
>
  <ejs-listview #listView [dataSource]="listApps$ | async">
    <ng-template #template let-data="">
    <!-- I want to apply the routerLinkActive above this element. Something like this:
     <li  [routerLink]="[data.path]" routerLinkActive="active"> 
     But, this adds another <li> after existing <li> element.
   -->
      <div class="e-list-wrapper" [routerLink]="[data.path]" routerLinkActive="active" >
        <div class="e-text-content">
          <span class="e-list-text">{{ data.name }} </span>
        </div>
      </div>
    </ng-template>
  </ejs-listview>
</ejs-sidebar>
<div class="main">
  <p>App component</p>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

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

In the above application, I am trying to add routerLinkActive to a child element, but I need it on the parent <li> element.

tangel
  • 309
  • 1
  • 3
  • 12
  • I want to know if there is a way to add routerLinkActive to
  • or bind route to the list items whenever the route is changed the list items need to be highlighted. Note: The list items are not static.
  • – tangel May 30 '23 at 07:32