Angular Mat-Tab-Group navigation with routerLink

Question

My url is localhost:port/home when I click on a mat tab, I want to adjust the url to home/secondTab, home/thirdTab or home/firstTab. I would have expected it with this setup, but it doens't work.

I want to construct a route, with the goal when I tell router to router.navigate(['home/secondTab'], he loads the homecomponent and the secondTabComponent and the users seed the secondTab in focus.

None of the child routes (home/secondTab) seem to work, url is never updated on click, and when I type the home/secondTab url myself, HomeComponent gets loaded. So in short nothing works and can't find no example with the same kind of setup as everyone is using nav mat + mat-tab-link

I'm pretty new to front-end development and official documentation is not that clear to me. Do I need a routing module for each component? Or can I do them all in app-routing in this setup? Is it possible what I want with the setup that I have or am I missing something? Thanks for the input.

For those that point to nav mat + mat-tab-link, I can't refactor it like that due to other flows working that way.

home.html

<mat-tab-group (selectedTabChange)="selectedTabChanged($event)" >
    <mat-tab label="FirstTab" >
        <app-FirstTab></app-FirstTab>  
    </mat-tab> 
    <mat-tab label="SecondTab" >
        <app-SecondTab></app-SecondTab>  
    </mat-tab> 
    <mat-tab label="ThirdTab" >
        <app-ThirdTab></app-ThirdTab>  
    </mat-tab> 
</mat-tab-group>

home.ts

selectedTabChanged(event: any){
    if(event.index == 0){ 
      this.Service.refreshTab();        
    }

    if(event.index == 1){ 
        this.Service.makeApiCall();  
    }

    if(event.index == 2){ 
 
    }
}

navigation.html

<div>
    <strong [routerLink]="['home/secondTab']" >
    </strong>
</div>

app-routing.ts

const routes: Routes = [
  Shell.childRoutes([
    { path: '', redirectTo: '/login', pathMatch: 'full' },  //works
    { path: 'home', component: HomeComponent },             //works

    { path: 'home/secondTab', component: SecondTabComponent }   //loads HomeComponent
    //OR        
    { path: 'home/secondTab', component: HomeComponent, loadChildren: () =>
        import ('./home/Second/Second.cmpnt').then(m => m.SecondTabComponent) }
  ])
];

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

score 1 · Answer 1 · answered Dec 21 '20 at 02:09

You can do something like this. Pass the FirstTab,secondTab or thirdTab via router parameter.

Check this

Then You can subscribe the paramMap and can write some thing like this.

<mat-tab-group [(selectedIndex)]="demo1TabIndex" (selectedTabChange)="selectedTabChanged($event)" >
    <mat-tab label="FirstTab" >
        <app-FirstTab></app-FirstTab>  
    </mat-tab> 
    <mat-tab label="SecondTab" >
        <app-SecondTab></app-SecondTab>  
    </mat-tab> 
    <mat-tab label="ThirdTab" >
        <app-ThirdTab></app-ThirdTab>  
    </mat-tab> 
</mat-tab-group>

...

    public demo1TabIndex = 1;

    ngOnInit() {
      this.route.paramMap.subscribe(params => {
        let tabName = params.get('tabn;ame')

    let _index = 1;
 
    if(tabName == 'FirstTab'){
        this.index = 1;
    }

    if(tabName == 'secondTab'){
        this.index = 2;
    }


    if(tabName == 'thirdTab '){
        this.index = 3;
    }

       this.demo1TabIndex = _index;
    }

I'm just give you idea and customize code what you want.

thanks for your answer. It was interesting video. I still have some questions about your example: where do I pass the params, on the mat-tab label or with the . Also, do I need a for each link? thankyou — dfbenny, Dec 21 '20 at 21:38

Angular Mat-Tab-Group navigation with routerLink

1 Answers1