tabs.component.ts

@Component({
  template: `
    <p-tabView [activeIndex]="activeTab()" (onChange)="changeTab($event)">
      <p-tabPanel header="Tab 1">
        <p>Tab 1 Content</p>
      </p-tabPanel>
      <p-tabPanel header="Tab 2">
        <p>Tab 2 Content</p>
      </p-tabPanel>
      <p-tabPanel header="Tab 3">
        <p>Tab 3 Content</p>
      </p-tabPanel>
    </p-tabView>
  `,
})
export class TabsComponent {
  // get the active tab index from route params
  activeTab = input.required<number>();
  readonly #router = inject(Router);
  readonly #route = inject(ActivatedRoute);

  changeTab(event: TabViewChangeEvent) {
    this.#router.navigate([event.index], {
      // irrelevant where the component is placed, 
      // as long as the `activeTab` is a child of `tabs` 
      relativeTo: this.#route.parent,
      // do not break the "back" button
      // when the browser's back button is clicked
      // it should take to the previous page
      // *not* the previous active tab  
      replaceUrl: true,
    });
  }
}