My RouterLinkActive Class is not working when I used it with the ngFor. I don't know where I am lagging. Below is the code I used.

HTML

<div class="mobileNavScroll" [class.leftNavOpened]="status">
    <ul role="tablist" aria-orientation="vertical">
      <li class="nav-item" *ngFor="let tab of tabs">
        <a
        routerLinkActive="active"
        routerLinkActiveOptions="{exact:true}"
          [routerLink]="tab.routerLink"
          >{{ tab.label }}</a
        >
        <i *ngIf="tab.hasErrors" class="pi pi-info-circle tab-errors"></i>
      </li>
    </ul>
  </div> 

.ts

tabs: CommercialReportentryTabInfo[];
this.tabs = [
  {
    label: 'General Info, Land & Zoning',
    routerLink: 'general',
    component: CommercialReportentryGeninfoComponent,
    hasErrors: false
  },
  {
    label: 'Improvements',
    routerLink: 'improvements',
    component: CommercialReportentryImprovementsComponent,
    hasErrors: false
  },
]

interface CommercialReportentryTabInfo {
  label: string;
  routerLink: string;
  formGroup?: string;
  component: Function;
  hasErrors: boolean;
}

I have added the required modules as well. The routerLink is working fine when clicked on different tab. However, the active class is not applied to the tab

0 Answers