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.