how to enable routerLink in mat-tab

Question

I am lazy loading a feature module as shown in Routing.module.ts from an app-routing.module.ts. The default route in featured routing module load the LccpTrackerComponent which contains 3 child routes. The template for the LccpTrackerComponent uses Angular Material tab component. I am trying to add the routerLink directive in the mat-tab title to route to a corresponding child component, but the route doesn't fire. Does anyone know how to make this work? Thanks.

Template

<article>
  <section>
    <mat-tab-group>
      <mat-tab label="Consults"><a routerLink="consults" /></mat-tab>
      <mat-tab label="Screening"><a routerLink="screening" /></mat-tab>
      <mat-tab label="Noduled"><a routerLink="noduled" /></mat-tab>
    </mat-tab-group>
  </section>
  <router-outlet></router-outlet>
</article>

Routing.module.ts

const routes: Routes = [{
  path: '',
  component: LccpTrackerComponent,
  children: [{
      path: 'consults',
      component: ConsultComponent,
      pathMatch: 'full',
      resolve: {
        consultSummary: LccpResolver
      }
    },
    {
      path: 'screening',
      component: ScreeningComponent,
      pathMatch: 'full',
      resolve: {
        enrolledSummary: ScreeningResolver
      }
    },
    {
      path: 'noduled',
      component: NoduledComponent,
      pathMatch: 'full',
      resolve: {
        noduledSummary: NoduledResolver
      }
    }
  ]
}, ];

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

Answer 1

Use <nav mat-tab-nav-bar>, from the docs:

<nav mat-tab-nav-bar>
 <a mat-tab-link
   *ngFor="let link of navLinks"
   [routerLink]="link.path"
   routerLinkActive #rla="routerLinkActive"
   [active]="rla.isActive">
  {{link.label}}
 </a>
</nav>

<router-outlet></router-outlet>

Answer 2

In my case, use <a [routerLink]="['/LinkPath']"> is fine.

But I also recommend you that can use page tag as routing since you've define the selector,

like path: 'consults' -> use <consults></consults>

For example :

<mat-tab-group>
   <mat-tab label="Consults"><consults</consults>></mat-tab>
   <mat-tab label="Screening"><screening></screening></mat-tab>
   <mat-tab label="Noduled"><noduled></noduled></mat-tab>
</mat-tab-group>

Besides, if you are worried about the loading, you can use [selectIndex] method (Might different from your material version) to fulfill the same purpose.