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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.