Angular tabView primeNG routing

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

Continue reading...