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'
  }
];

Answer 1

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

[routerLinkActiveOptions]="{ exact: false }"