How can I keep a mat-tab active when I navigate to a subchild of its route in Angular?

Question

I am using mat-tab-nav-bar to show 2 tabs as listed below:

tabs.component.html:

<nav mat-tab-nav-bar>
  <a
    mat-tab-link
    *ngFor="let routeLink of routeLinks; let i = index"
    [routerLink]="routeLink.link"
    routerLinkActive
    #rla="routerLinkActive"
    [active]="rla.isActive"
    (click)="activeLinkIndex = i"
    [routerLinkActiveOptions]="{ exact: true }"
  >
    {{ routeLink.label | translate }}
  </a>
</nav>

tabs.component.ts:

routeLinks = [
      {
        label: 'Overview',
        link: '/tabs/overview',
        index: 0
      },
      {
        label: 'Products',
        link: '/tabs/products',
        index: 1
      },
    ];

app.routing.module.ts:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsComponent,
    children: [
      {
        path: 'overview',
        children: [
          {
            path: '',
            loadChildren: () => import('src/pages/overview/overview.module').then(m => m.OverviewModule)
          }
        ]
      },
      {
        path: 'products',
        children: [
          {
            path: '',
            loadChildren: () => import('src/pages/products/products.module').then(m => m.ProductsModule)
          }
        ]
      },
      {
        path: 'products/:productID',
        children: [
          {
            path: '',
            loadChildren: () => import('src/pages/products/product.module').then(m => m.ProductModule)
          }
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/overview',
    pathMatch: 'full'
  }
];

When I am navigating to /products, the tab is active. But when I am navigating to /products/:productID, the tab is not active. How can I keep it active since it is in the /products route?

I also tried to make the /products/:productID child of /products route but it does not work. Updated here in my app-routing.module.ts:

    const routes: Routes = [
      {
        path: 'tabs',
        component: TabsComponent,
        children: [
          {
            path: 'overview',
            children: [
              {
                path: '',
                loadChildren: () => import('src/pages/overview/overview.module').then(m => m.OverviewModule)
              }
            ]
          },
          {
            path: 'products',
            children: [
              {
                path: '',
                loadChildren: () => import('src/pages/products/products.module').then(m => m.ProductsModule)
              },
              {
                path: ':productID',
                loadChildren: () => import('src/pages/product/product.module').then(m => m.ProductModule)
              }
            ]
          }
  {
    path: '',
    redirectTo: '/tabs/overview',
    pathMatch: 'full'
  }
];

It is not active because with your configuration, `products` and `products/:productId` are 2 unrelated routes and the router only checks if the currently active route matches `products`.It probably makes more sense to make `products/:productId` a child of `products`. — , Jun 10 '20 at 07:35
To clarify, if you were to make `products/:productId` a child of `products` you won't need the `products` part of the child since it's already in the parent route. — , Jun 10 '20 at 07:40
@MikeS. I tried what you suggested and it does not work also. see my code below. — Kathrine Hanson, Jun 10 '20 at 07:42
Why are you setting `routerLinkActiveOptions` to `exact: true`? — Poul Kruijt, Jun 10 '20 at 07:55
@KathrineHanson You're welcome :) ill post it as an answer for future readers — Poul Kruijt, Jun 10 '20 at 08:09

score 0 · Accepted Answer · answered Jun 10 '20 at 08:09

0

To have child routes also activate your routerLinkActive, you need to set:

[routerLinkActiveOptions]="{ exact: false }"

answered Jun 10 '20 at 08:09

Poul Kruijt

69,713
12
145
149

How can I keep a mat-tab active when I navigate to a subchild of its route in Angular?

1 Answers1