How can I remove the intentionally set active class from a list item when other items are clicked, while still keeping it active on page load using routerLinkActive="active" in Angular?
I attempted to use ngClass but it did not work as expected. Is there a way to achieve this without relying on jQuery?
<ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" [ngClass]="{'active': selectedItem == menuItem}" (click)="listClick($event, menuItem)">
<a class="nav-link" [routerLink]="[menuItem.path]">
<p>{{ menuItem.title }}</p>
</a>
</li>
</ul>
declare interface RouteInfo {
path: String,
title: String,
class: String
}
export const ROUTES: RouteInfo[] = [
{ path: '', title: 'Dashboard', class: '' },
{ path: '/vessel', title: 'Vessel Details', class: '' },
{ path: '/arrival', title: 'Arrival Details', class: ''},
{ path: '/stock', title: 'StockYard', class: ''},
{ path: '/cargo', title: 'Cargo Details', class: '' },
{ path: '/other', title: 'Others', class: ''}
];
menuItems: any[];
selectedItem= false;
listClick(event, newValue) {
console.log(newValue);
this.selectedItem = !this.selectedItem;
}
The active class that was intentionally set should be disabled when another list item is clicked.