routerLink inside <mat-tab> angular material

Question

<a routerLink="/add"></a><mat-tab label="Add Identity"></mat-tab>

or

<mat-tab label="Add Identity"> <a routerLink="/add"></a></mat-tab>.

I am new to Angular, Trying to use routing with the above Angular material component.

But it's not appending the URL when I am clicking on the Home tab. Any help on this.

Soy

The only issue is, slider (arrow) is missing if there are many tabs at a time , which is bydefault is mat-tab-group – Metathesis

Answer 1

you can actually combine them into one like this:

<a mat-tab-link [routerLink]="/add">Add Identity</a>

you'll also need to make sure you're using <nav mat-tab-nav-bar>, instead of <mat-tab-group>.

documentation here: https://material.angular.io/components/tabs/overview#tabs-and-navigation

Mayramays

Your answer led me to the solution I needed, however you should mention that with this solution, one should not use <mat-tab-group>, but <nav mat-tab-nav-bar> – Jerusalem

thanks @toongeorges! answer has been updated to clarify – Mayramays

Answer 2

This is how i have implemented.

app.component.html

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

AppComponent

export class AppComponent implements OnInit{
  title = 'app';
  navLinks: any[];
  activeLinkIndex = -1;

  constructor(private router: Router) {
    this.navLinks = [
        {
            label: 'TabTest1',
            link: './tabtest1',
            index: 0
        }, {
            label: 'Tab Test2',
            link: './tabtest2',
            index: 1
        }, {
            label: 'Tab Test3',
            link: './tabtest3',
            index: 2
        }, 
    ];
}
ngOnInit(): void {
  this.router.events.subscribe((res) => {
      this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
  });
}
}

routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/tabtest1', pathMatch: 'full' },
  { path: 'tabtest1', component:  TestComponent1},
  { path: 'tabtest2', component:  TestComponent2},

];

export const appRouting = RouterModule.forRoot(routes);



@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    CommonModule
  ],
  exports:[
    RouterModule
  ],

  declarations: []
})
export class AppRoutingModule { }

I hope this helps someone

Ponceau

if I add (click)="onTabClick()" to the "a" element and console.log(this.activeLinkIndex) in onTabClick() function I do not get the correct index values. Any idea how to track active link index correctly? – Treadmill

thanks, you saved a lot of time for me! – Alderney

How to get rid of the component: TestComponent1 and instead use the code from the main template? Or alternatively, how to make variables from the main component visible within the tab content components? – Bernadinebernadotte

Answer 3

if you need set routerLink on Click <mat-tab> inside <mat-tab-group> without any workarounds and changes of current code with mat-tab-nav logic things directly - you can use mat-tab-group listener (selectedTabChange)="onTabChanged($event)":

.html:

<mat-tab-group
  (selectedTabChange)="onTabChanged($event)"
>
<mat-tab label="Link to some thing"></mat-tab> <!-- empty stub tab only for link -->
<mat-tab label="Some content tab"> ... content there ... </mat-tab>

</mat-tab-group>

.ts:

onTabChanged(event: MatTabChangeEvent): void {
    switch (event.index) {
      case 0: // index of the tab
        // this is our stub tab for link
        this.router.navigate(['/admin/my-link']);
        break;
      case 1:
        // do stuff with content or do nothing :)
        break;
    }

Naphthalene

Answer 4

<nav mat-tab-nav-bar [backgroundColor]="background">
  <a mat-tab-link *ngFor="let link of links"
     (click)="activeLink = link"
     [active]="activeLink == link"> {{link}} </a>
  <a mat-tab-link disabled>Disabled Link</a>
</nav>

Ref: https://material.angular.io/components/tabs/overview#tabs-and-navigation

Pimp