How to apply Angular routerLinkActive for tab component that sharing same path

Question

I've created a page using angular material with sidebar and tab.
Im using angular 7.
Here is sample image ->

sample image:

When I navigate to content tab, is-active class no longer apply to selected group in sidebar (no highlight). it is sharing same path. Group should be highlighted when we navigate to content tab. I try few methods but I still can't acheive that.
Here is my code:

app.html

<mat-sidenav-container class="user-group-container">
  <mat-sidenav class="group-sidenav" mode="side" opened>
    <h3 matSubheader class="menu-sidenav-header">Groups</h3>
    <mat-list class="menu-list-sidenav" role="list">
      <mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
        <div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
          {{(group.groupName.length > 22) ? (group.groupName | slice:0:23) + '..' :(group.groupName)}}
        </div>
      </mat-list-item>
    </mat-list>
    <div class="add-group-section" (click)="openCreateGroupModal()">
      <mat-icon mat-list-icon>add</mat-icon>
      <div class="add-group-btn">Add New Group</div>
    </div>
  </mat-sidenav>
  <mat-sidenav-content>
    <nav mat-tab-nav-bar>
      <a mat-tab-link *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="routeLink.link" routerLinkActive #rla="routerLinkActive" (click)="activeLinkIndex = i" [active]="rla.isActive">
     {{routeLink.label}}
    </a>
    </nav>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

app.ts

export class UserGroupComponent implements OnInit {

  routeLinks: any[];
  activeLinkIndex = -1;

  constructor(private userManagementService: UserManagementService,
    public dialog: MatDialog) {

    this.routeLinks = [{
        label: 'Overview',
        link: './overview',
        index: 0
      },
      {
        label: 'Permissions',
        link: './permission',
        index: 1
      }
    ];
  }

  ngOnInit() {}

  get groups() {
    return this.userManagementService.groups;
  }

}

app.routing.ts

const userManagementRoutes: Routes = [{
  path: '',
  component: UserManagementComponent,
  children: [{
    path: 'group/:groupCode',
    component: UserGroupComponent,
    canActivate: [AuthGuard],
    children: [{
        path: 'permission',
        component: UserPermissionComponent,
        canActivate: [AuthGuard]
      },
      {
        path: 'overview',
        component: UserGroupOverviewComponent,
        canActivate: [AuthGuard]
      }
    ]
  }]
}];

@NgModule({
  imports: [
    RouterModule.forChild(userManagementRoutes)
  ],
  exports: [RouterModule]
})
export class UserManagementRoutingModule {}

Can you please create a small demo over stackblitz ?, it will be easy to debug the problem. — Abhishek Kumar, Mar 25 '19 at 07:18
@AbhishekKumar im facing some issue while creating stackblitz. here is code: https://stackblitz.com/edit/angular-material-tabs-on-push-vtzvvn — SKL, Mar 25 '19 at 09:17
`[routerLinkActive]="['is-active']"` will be true for groups for a particular url, and i think as you are using tab bar with `nav-links`, so the url is changing and `is-active` from groups option is deselected. Is this happening ?? or in both case url is same. — Abhishek Kumar, Mar 25 '19 at 09:38
Yes correct. When first time page load this url `group/{{Dynamic_Code}}/overview` being called for the content tab `group//{{Dynamic_Code}}/content` — SKL, Mar 25 '19 at 10:39
should i post it as answer ? or its okay for the other users looking for the answer. — Abhishek Kumar, Mar 25 '19 at 10:43
i will post same as the comment i have posted here, ie about the url change thats why it was not working. Hope you have figured the solution and this answer will be helpful for other users looking for similar answer. — Abhishek Kumar, Mar 25 '19 at 14:40

score 0 · Answer 1 · answered Mar 25 '19 at 15:10

I solved this with ngClass. I removed [routerLinkActive]="['is-active']" and simply add ngClass condition as below.

<div [ngClass]="(group.groupCode === groupCode) ? 'is-active' : ''" matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']">
  {{(group.groupName.length > 22) ? (group.groupName | slice:0:23) + '..' :(group.groupName)}}
</div>

How to apply Angular routerLinkActive for tab component that sharing same path

1 Answers1