CODEWITHSUNDEEP
angularroutesparent-child
rob
rob

Reputation: 301

Angular Child Routing in Tabs not showing in active tab

Hi I am using angular tabs to route my application and I have some child routes. The second tab has two child routes. When I switch to the second child route the tab status goes from active to nothing. I don't know where I could be going wrong. My code so far is as follows:

content.html (for the nav links)

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

Content.ts

  navLinks = [
    {path: 'details', label: 'Details'},
    {path: 'select/products', label: 'Product'},
    {path: 'client', label: 'Client'},
  ];

app.module.ts

const appRoutes: Routes = [
  { path: 'details', component: DetailsComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'warranty',component: WarrantyComponent },
  { path: 'details',component: CldetailsComponent },
  { path: 'select',component: SelectComponent },
];

RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } 
    ),

RouterModule.forRoot([
     { path: '', redirectTo: 'login', pathMatch: 'full' },
     { path: 'login', component: LoginComponent},
     { 
       path: 'policy', 
       component: PolicyComponent, 
       children: [
        {path: 'details', component: DetailsComponent}, 
        {path: 'select',component: SelectComponent, children: [{path: 'products', component: ProductsComponent},{path: 'warranty', component: WarrantyComponent},]}, 
        {path: 'client', component: CldetailsComponent},
       ]
    },

Router Links paths I am using for the nav

<a routerLink="/policy/select/products"></a>
<a routerLink="/policy/select/warranty"></a>

Screenshots below show, when using the product route it's fine but when I try to route to the warranty route, the tab state goes. Any ideas?

Active state

Not Active state

Upvotes: 1

Views: 3159

Answers (1)

Sunil
Sunil

Reputation: 11243

The issue with the parent nav link path. You should use the parent path of product and warranty in the navbar so that it can be active on the bases of product and `warranty.

Change the path for select/products to select as

  navLinks = [
    {path: 'details', label: 'Details'},
    {path: 'select', label: 'Product'}, //<--- changed here
    {path: 'client', label: 'Client'},
  ];

Note : You may need to change the routing configuration for select path as well. What needs to be the default Component to be rendered in case of /policy/select path.

Ex : here the default Component will be ProductComponent

 children: [

        {path: 'select',component: SelectComponent, children: [{path: '', component: ProductsComponent}, {path: 'products', component: ProductsComponent},{path: 'warranty', component: WarrantyComponent}]}
       ]

Upvotes: 1

Related Questions