Get current header of the tabView PrimeNG

Question

I'd like to get current header of the PrimeNG tabView. I tried to do it by binding activeIndex property but it didn't work.

Answer 1

You can get a reference to your tabView in your component using @ViewChild and bind to a variable the selectedIndex then you can get the header of selected tavview this.tabView.tabs[this.selectedIndex].header.

Below a sample code: app.component.ts

import { Component, ViewChild } from '@angular/core';
//imports
import {TabView, TabPanel} from 'primeng/primeng';

@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  selectedIndex = 0;
  //class variable
  @ViewChild(TabView) tabView: TabView;

  onChange($event) {
    this.selectedIndex = $event.index;
  }

  getSelectedHeader(){
    console.log(this.tabView.tabs[this.selectedIndex].header);
  }
}

app.component.html

<h2>PrimeNG Issue Template</h2>
<button pButton (click)="getSelectedHeader()" label="selected header"></button>
<p-tabView (onChange)="onChange($event)" [activeIndex]="selectedIndex">
  <p-tabPanel header="first" [selected]="true">
    <first></first>

  </p-tabPanel>
  <p-tabPanel header="second" cache="false">
    <ng-template pTemplate="content">
      <second></second>
    </ng-template>
  </p-tabPanel>
</p-tabView>

A working plunker

Answer 2

.html

<p-tabView #tabView (onChange)="tabViewChange($event, tabView)">...</p-tabView>

.ts

tabViewChange(event, tabView: TabView) {
 const headerValue = tabView.tabs[event.index].header;
}