Angular 10 `routerLink` in` mat-tab` does not work

Question

I'm using Angular 10. In the CoreModule class I have the component NavbarComponent. I have this HTML template in the NavbarComponent component:

<mat-tab-group mat-align-tabs="end">
    <mat-tab routerLinkActive>Home</mat-tab>
    <mat-tab routerLink="/user/registration"></mat-tab>
    <mat-tab>Login</mat-tab>
</mat-tab-group>

After clicking on the link, nothing happens. URL does not change. It's the same all the time http://localhost:4200/home. In the class of the HomeModule module there is a component with an HTML template:

<app-navbar></app-navbar>
<app-footer></app-footer>

The HomeRoutingModule class contains arrays:

const routes: Routes = [{ path: '', component: HomeComponent }];

The AppRoutingModule class contains arrays:

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  { path: 'user',
    loadChildren: () => import('./modules/users/users.module').then(m => m.UsersModule)
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'home'
  },
];

The UsersRoutingModule class contains arrays:

const routes: Routes = [
  {
    path: 'user',
    component: UsersComponent,
    children: [
      {
        path: 'registration',
        data: { title: 'registration' },
        component: UserRegistrationComponent,
      }
    ]
  }
];

project structure:

I do not know how to make the redirection to the UserRegistrationComponent carried out. When I click: <mat-tab routerLink ="/user/registration "> URL does not change.

Please help. Thank you very much.

score 0 · Answer 1 · answered Jul 02 '20 at 22:37

related to your routes, this will work

<mat-tab routerLink="/user/user/registration"></mat-tab>

since you have

{ path: 'user',
 loadChildren: () => import('./modules/users/users.module').then(m => m.UsersModule)
},

so /user will load your lazy loaded module and then the second /user

{
path: 'user',
component: UsersComponent,
children: [
  {
    path: 'registration',
    data: { title: 'registration' },
    component: UserRegistrationComponent,
  }
]
}

you can try change your users module routes like this

{
path: '',
component: UsersComponent,
children: [
  {
    path: 'registration',
    data: { title: 'registration' },
    component: UserRegistrationComponent,
  }
]
}

to make this work

<mat-tab routerLink="/user/registration"></mat-tab>

The URL still does not change :( I did as you wrote. In the `UsersRoutingModule` class I changed `const routes: Routes = [{ path: '', component: UsersComponent, children: [{ path: 'registration', data: { title: 'registration' }, component: UserRegistrationComponent, }] }];` and in the HTML template `` I still don't know how to improve the redirection to the UserRegistrationComponent — 609tom, Jul 02 '20 at 23:41

score 0 · Answer 2 · answered Oct 25 '22 at 00:51

Angular now provides a different type of tab group for navigation, using a <nav mat-tab-nav-bar> element containing <a mat-tab-link> elements. The only caveat is that you need to manually provide the [active] attribute.

For your example: (I assumed you meant to merge the second and third tabs)

<!-- navbar.component.html -->
<nav mat-tab-nav-bar>
  <a mat-tab-link [active]="true">Home</a>
  <a mat-tab-link routerLink='/user/registration'>Login</a>
</nav>

Angular 10 `routerLink` in` mat-tab` does not work

2 Answers2