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.


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


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