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
CodePudding user response:
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"])
},
},
];