RouterTab

Router-Tab Directive

Install

npm install @zerohouse/router-tab --save

Import RouterTabModule

@NgModule({
  declarations: [
    AppComponent, PageAComponent, PageBComponent, PageCComponent
  ],
  imports: [
    RouterTabModule, // this module

    RouterModule.forRoot([
      {path: '', pathMatch: 'full', redirectTo: 'a'},
      {path: 'a', component: PageAComponent},
      {path: 'b', component: PageBComponent},
      {path: 'c', component: PageCComponent}
    ]),
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

use routerTabs On MatTabGroup

<mat-tab-group routerTabs>
  <mat-tab label="Page A" routerLink="a"></mat-tab>
  <mat-tab label="Page B" routerLink="b"></mat-tab>
  <mat-tab label="Page C" routerLink="c"></mat-tab>
</mat-tab-group>
<router-outlet></router-outlet>