Angular TabView PrimeNG Routing

Contents hide

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