Angular tabView primeNG routing

Angular tabView primeNG routing

Problem Description:

I am trying to add routing to my tabView but it is not working, any suggestions why that is please ? i tried adding routerLink="path to component" but no luck

this is html

<p-tabView>
  <p-tabPanel header="Weather Data" routerLink="/weather-data">
     <app-weather-data></app-weather-data>
  </p-tabPanel>
  <p-tabPanel header="Chart">
      <app-chart></app-chart>
  </p-tabPanel>
  <p-tabPanel header="Heat index calculator" closable="true">
      <app-heat-index></app-heat-index>
  </p-tabPanel>
</p-tabView>

this is module.ts

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'weather-data', component: WeatherDataComponent },
  { path: 'chart', component: ChartComponent },
  { path: 'heat-index', component: HeatIndexComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    WeatherDataComponent,
    ChartComponent,
    HeatIndexComponent,
  ],
  imports: [
    BrowserModule,
    TabViewModule,
    ButtonModule,
    ChartModule,
    TableModule,
    HttpClientModule,
    InputNumberModule,
    FormsModule,
    SelectButtonModule,
    DropdownModule,
    BrowserAnimationsModule,
    FontAwesomeModule,
    InputSwitchModule,
    PaginatorModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes),
  ],
  providers: [DatePipe],
  bootstrap: [AppComponent],
})
export class AppModule {}

i cant find any documentation on the tabView component on how to implement routing, any help appreciated

Solution – 1

I used the TabMenu component in the following way.

<p-tabMenu [model]="items"> </p-tabMenu>
<router-outlet></router-outlet>

The MenuItem type has a command property, on the command you can implement your custom action, which in your case can be routing.

  this.items = [
  {
    label: "Map",
    icon: "pi pi-fw pi-map",
    command: () => {
      this.router.navigate(["./map"])
    },
  },
];
Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject